@ng-nest/ui 17.0.11 → 18.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-loading.mjs","sources":["../../../../lib/ng-nest/ui/loading/loading.property.ts","../../../../lib/ng-nest/ui/loading/loading.component.ts","../../../../lib/ng-nest/ui/loading/loading.component.html","../../../../lib/ng-nest/ui/loading/loading.module.ts","../../../../lib/ng-nest/ui/loading/ng-nest-ui-loading.ts"],"sourcesContent":["import { XProperty, XInputBoolean, XSize, XTemplate, XBoolean, XWithConfig, XNumber } from '@ng-nest/ui/core';\r\nimport { Input, Component } from '@angular/core';\r\n\r\n/**\r\n * Loading\r\n * @selector x-loading\r\n * @decorator component\r\n */\r\nexport const XLoadingPrefix = 'x-loading';\r\nconst X_CONFIG_NAME = 'loading';\r\n\r\n/**\r\n * Loading Property\r\n */\r\n@Component({ selector: `${XLoadingPrefix}-property`, template: '' })\r\nexport class XLoadingProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 显示 loading\r\n   * @en_US Show loading\r\n   */\r\n  @Input('x-loading') @XInputBoolean() loading: XBoolean = false;\r\n  /**\r\n   * @zh_CN 层级\r\n   * @en_US z-index\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 10) zIndex?: XNumber;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size?: XSize | number;\r\n  /**\r\n   * @zh_CN 显示文字，支持自定义模板\r\n   * @en_US Display text, support custom template\r\n   */\r\n  @Input() @XWithConfig<XTemplate>(X_CONFIG_NAME) text?: XTemplate;\r\n  /**\r\n   * @zh_CN 显示的图标\r\n   * @en_US Icon displayed\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME) icon?: string;\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME) color?: string;\r\n  /**\r\n   * @zh_CN 全屏显示\r\n   * @en_US Full-screen display\r\n   */\r\n  @Input() @XInputBoolean() fullScreen?: XBoolean;\r\n  /**\r\n   * @zh_CN 背景样式\r\n   * @en_US Background style\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME) background?: string;\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  SimpleChanges,\r\n  OnChanges,\r\n  HostBinding,\r\n  ViewChild,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n  inject\r\n} from '@angular/core';\r\nimport { XLoadingPrefix, XLoadingProperty } from './loading.property';\r\nimport { XIsChange, XIsEmpty, XConfigService, XIsNumber, XClearClass } from '@ng-nest/ui/core';\r\nimport { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XLoadingPrefix}, [${XLoadingPrefix}]`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet, XIconComponent, XOutletDirective],\r\n  templateUrl: './loading.component.html',\r\n  styleUrls: ['./loading.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XLoadingComponent extends XLoadingProperty implements OnInit, OnChanges {\r\n  @HostBinding('class.x-loading-parent') get getLoading() {\r\n    return this.loading;\r\n  }\r\n  @ViewChild('loadingTpl') loadingTpl!: TemplateRef<void>;\r\n  portalRef!: XPortalOverlayRef<any>;\r\n\r\n  sizeNumber?: number;\r\n\r\n  private cdr = inject(ChangeDetectorRef);\r\n  private portal = inject(XPortalService);\r\n  private viewContainerRef = inject(ViewContainerRef);\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    const { loading, size } = changes;\r\n    XIsChange(loading) && this.setLoading();\r\n    XIsChange(size) && this.setClassMap();\r\n  }\r\n\r\n  setClassMap() {\r\n    XClearClass(this.classMap);\r\n    if (XIsNumber(this.size)) {\r\n      this.sizeNumber = this.size as number;\r\n    } else {\r\n      this.classMap[`${XLoadingPrefix}-${this.size}`] = !XIsEmpty(this.size);\r\n    }\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  setLoading() {\r\n    if (this.fullScreen) {\r\n      if (this.loading) {\r\n        this.createFullScreen();\r\n      } else {\r\n        this.closeFullScreen();\r\n      }\r\n    }\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  createFullScreen() {\r\n    this.portalRef = this.portal.attach({\r\n      content: this.loadingTpl,\r\n      viewContainerRef: this.viewContainerRef,\r\n      overlayConfig: {\r\n        width: '100%',\r\n        height: '100%',\r\n        positionStrategy: this.portal.setPlacement()\r\n      }\r\n    });\r\n  }\r\n\r\n  closeFullScreen() {\r\n    if (this.portalRef?.overlayRef?.hasAttached()) {\r\n      this.portalRef.overlayRef.detach();\r\n    }\r\n  }\r\n}\r\n","<ng-content></ng-content>\r\n\r\n@if (!fullScreen) {\r\n  <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #loadingTpl>\r\n  @if (loading) {\r\n    <div #loading class=\"x-loading\" [ngClass]=\"classMap\" [style.background]=\"background\" [style.zIndex]=\"zIndex\">\r\n      <div class=\"x-loading-spinner\" [style.color]=\"color\">\r\n        @if (icon) {\r\n          <div class=\"x-loading-icon\" [style.font-size.px]=\"sizeNumber\">\r\n            <x-icon [type]=\"icon\"></x-icon>\r\n          </div>\r\n        } @else {\r\n          <svg\r\n            class=\"x-loading-circular\"\r\n            [style.width.px]=\"sizeNumber\"\r\n            [style.height.px]=\"sizeNumber\"\r\n            viewBox=\"25 25 50 50\"\r\n          >\r\n            <circle class=\"x-loading-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n          </svg>\r\n        }\r\n        <div class=\"x-loading-text\">\r\n          <ng-container *xOutlet=\"text\">{{ text }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circularTpl> </ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XLoadingComponent } from './loading.component';\r\n\r\n@NgModule({\r\n  exports: [XLoadingComponent],\r\n  imports: [XLoadingComponent]\r\n})\r\nexport class XLoadingModule {}\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-loading.mjs","sources":["../../../../lib/ng-nest/ui/loading/loading.property.ts","../../../../lib/ng-nest/ui/loading/loading.component.ts","../../../../lib/ng-nest/ui/loading/loading.component.html","../../../../lib/ng-nest/ui/loading/loading.module.ts","../../../../lib/ng-nest/ui/loading/ng-nest-ui-loading.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToNumber } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XSize, XTemplate, XBoolean, XNumber, XCorner } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Loading\r\n * @selector x-loading\r\n * @decorator component\r\n */\r\nexport const XLoadingPrefix = 'x-loading';\r\nconst X_LOADING_CONFIG_NAME = 'loading';\r\n\r\n/**\r\n * Loading Property\r\n */\r\n@Component({ selector: `${XLoadingPrefix}-property`, template: '' })\r\nexport class XLoadingProperty extends XPropertyFunction(X_LOADING_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 显示 loading\r\n   * @en_US Show loading\r\n   */\r\n  readonly loading = input<boolean, XBoolean>(false, { transform: XToBoolean, alias: 'x-loading' });\r\n  /**\r\n   * @zh_CN 层级\r\n   * @en_US z-index\r\n   */\r\n  readonly zIndex = input<number, XNumber>(this.config?.zIndex ?? 10, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  readonly size = input<XSize | number>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 显示文字，支持自定义模板\r\n   * @en_US Display text, support custom template\r\n   */\r\n  readonly text = input<XTemplate>(this.config?.text!);\r\n  /**\r\n   * @zh_CN 显示的图标\r\n   * @en_US Icon displayed\r\n   */\r\n  readonly icon = input<string>(this.config?.icon!);\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  readonly color = input<string>(this.config?.color!);\r\n  /**\r\n   * @zh_CN 全屏显示\r\n   * @en_US Full-screen display\r\n   */\r\n  readonly fullScreen = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 圆角覆盖显示\r\n   * @en_US Rounded corner coverage display\r\n   */\r\n  readonly radius = input<XBoolean | XCorner[]>();\r\n  /**\r\n   * @zh_CN 背景样式\r\n   * @en_US Background style\r\n   */\r\n  readonly background = input<string>(this.config?.background!);\r\n}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  HostBinding,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n  inject,\r\n  computed,\r\n  effect,\r\n  viewChild\r\n} from '@angular/core';\r\nimport { XLoadingPrefix, XLoadingProperty } from './loading.property';\r\nimport { XIsEmpty, XIsNumber, XCorner, XToNumber } from '@ng-nest/ui/core';\r\nimport { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XLoadingPrefix}, [${XLoadingPrefix}]`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet, XIconComponent, XOutletDirective],\r\n  templateUrl: './loading.component.html',\r\n  styleUrls: ['./loading.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XLoadingComponent extends XLoadingProperty {\r\n  @HostBinding('class.x-loading-parent') get getLoading() {\r\n    return this.loading();\r\n  }\r\n  loadingTpl = viewChild.required<TemplateRef<void>>('loadingTpl');\r\n  portalRef!: XPortalOverlayRef<any>;\r\n\r\n  isRadius = computed(() => !(this.radius() instanceof Array) && Boolean(this.radius()));\r\n\r\n  sizeNumber = computed(() => {\r\n    const size = XToNumber(this.size());\r\n    if (XIsNumber(size)) {\r\n      return size;\r\n    }\r\n    return;\r\n  });\r\n\r\n  classMap = computed(() => {\r\n    const size = this.size();\r\n    if (isNaN(XToNumber(size))) {\r\n      return { [`${XLoadingPrefix}-${size}`]: !XIsEmpty(size) };\r\n    }\r\n    return;\r\n  });\r\n\r\n  private portal = inject(XPortalService);\r\n  private viewContainerRef = inject(ViewContainerRef);\r\n\r\n  constructor() {\r\n    super();\r\n    effect(\r\n      () => {\r\n        if (this.fullScreen()) {\r\n          if (this.loading()) {\r\n            this.createFullScreen();\r\n          } else {\r\n            this.closeFullScreen();\r\n          }\r\n        }\r\n      },\r\n      { allowSignalWrites: true }\r\n    );\r\n  }\r\n\r\n  includeRadius(cover: XCorner) {\r\n    const radius = this.radius();\r\n    if (!(radius instanceof Array)) {\r\n      return false;\r\n    }\r\n    return radius.includes(cover);\r\n  }\r\n\r\n  createFullScreen() {\r\n    this.portalRef = this.portal.attach({\r\n      content: this.loadingTpl(),\r\n      viewContainerRef: this.viewContainerRef,\r\n      overlayConfig: {\r\n        width: '100%',\r\n        height: '100%',\r\n        positionStrategy: this.portal.setPlacement()\r\n      }\r\n    });\r\n  }\r\n\r\n  closeFullScreen() {\r\n    if (this.portalRef?.overlayRef?.hasAttached()) {\r\n      this.portalRef.overlayRef.detach();\r\n    }\r\n  }\r\n}\r\n","<ng-content></ng-content>\r\n\r\n@if (!fullScreen()) {\r\n  <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #loadingTpl>\r\n  @if (loading()) {\r\n    <div\r\n      #loading\r\n      class=\"x-loading\"\r\n      [ngClass]=\"classMap()\"\r\n      [style.background]=\"background()\"\r\n      [style.zIndex]=\"zIndex()\"\r\n      [class.x-loading-radius]=\"isRadius()\"\r\n      [class.x-loading-top-left-radius]=\"includeRadius('top-start')\"\r\n      [class.x-loading-top-right-radius]=\"includeRadius('top-end')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-start')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-end')\"\r\n    >\r\n      <div class=\"x-loading-spinner\" [style.color]=\"color()\">\r\n        @if (icon()) {\r\n          <div class=\"x-loading-icon\" [style.font-size.px]=\"sizeNumber()\">\r\n            <x-icon [type]=\"icon()\"></x-icon>\r\n          </div>\r\n        } @else {\r\n          <svg\r\n            class=\"x-loading-circular\"\r\n            [style.width.px]=\"sizeNumber()\"\r\n            [style.height.px]=\"sizeNumber()\"\r\n            viewBox=\"25 25 50 50\"\r\n          >\r\n            <circle class=\"x-loading-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n          </svg>\r\n        }\r\n        <div class=\"x-loading-text\">\r\n          <ng-container *xOutlet=\"text()\">{{ text() }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circularTpl> </ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XLoadingComponent } from './loading.component';\r\n\r\n@NgModule({\r\n  exports: [XLoadingComponent],\r\n  imports: [XLoadingComponent]\r\n})\r\nexport class XLoadingModule {}\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-menu.mjs

@@ -1,8 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XDataConvert, XWithConfig, XInputBoolean, XInputNumber, XConfigService, XIsChange, XSetData, XIsEmpty, XGroupBy } from '@ng-nest/ui/core';
-import { Subject } from 'rxjs';
+import { input, model, output, Component, inject, ElementRef, effect, ViewEncapsulation, ChangeDetectionStrategy, signal, computed, NgModule } from '@angular/core';
+import { XPropertyFunction, XToDataArray, XToCssPixelValue, XToBoolean, XToNumber, XProperty, XIsEmpty, XIsChange, XGroupBy } from '@ng-nest/ui/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass } from '@angular/common';
 import { XSliderComponent } from '@ng-nest/ui/slider';
 import { XDropdownComponent } from '@ng-nest/ui/dropdown';
@@ -16,100 +14,86 @@ import { RouterModule } from '@angular/router';
  * @decorator component
  */
 const XMenuPrefix = 'x-menu';
-const X_CONFIG_NAME = 'menu';
+const X_MENU_CONFIG_NAME = 'menu';
 /**
  * Menu Property
  */
-class XMenuProperty extends XProperty {
+class XMenuProperty extends XPropertyFunction(X_MENU_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.data = [];
+        this.data = input([], { transform: XToDataArray });
         /**
          * @zh_CN 布局方向
          * @en_US Layout direction
          */
-        this.layout = 'row';
+        this.layout = input('row');
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 宽度，只有布局 layout 为 'column' 生效
+         * @en_US Width, only layout layout is the 'column'
+         */
+        this.width = input(this.config?.width ?? '16rem', { transform: XToCssPixelValue });
         /**
          * @zh_CN 缩起菜单
          * @en_US Shrink menu
          */
-        this.collapsed = false;
+        this.collapsed = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 触发方式，只针对横向布局
+         * @en_US Trigger mode, only for horizontal layout
+         */
+        this.trigger = input(this.config?.trigger ?? 'hover');
+        /**
+         * @zh_CN 节点模板
+         * @en_US Node template
+         */
+        this.nodeTpl = input();
+        /**
+         * @zh_CN 展开的所有层级，只对 layout 布局为 'column' 的生效
+         * @en_US All expanded levels are only effective for the layout of'column'
+         */
+        this.expandedAll = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 默认展开的层级，只对 layout 布局为 'column' 的生效
          * @en_US The level expanded by default is only valid for the layout of'column'
          */
-        this.expandedLevel = -1;
+        this.expandedLevel = input(-1, { transform: XToNumber });
         /**
-         * @zh_CN 节点点击的事件
-         * @en_US Node click event
+         * @zh_CN 当前激活的节点 id
+         * @en_US Currently active node id
+         */
+        this.activatedId = model();
+        /**
+         * @zh_CN 滚动容器
+         * @en_US Rolling container
          */
-        this.nodeClick = new EventEmitter();
+        this.target = input();
+        /**
+         * @zh_CN 弹框的最小宽度
+         * @en_US Portal min-width
+         */
+        this.portalMinWidth = input('', { transform: XToCssPixelValue });
         /**
          * @zh_CN 节点点击的事件
          * @en_US Node click event
          */
-        this.activatedIdChange = new EventEmitter();
+        this.nodeClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XMenuProperty, selector: "x-menu-property", inputs: { data: "data", layout: "layout", size: "size", width: "width", collapsed: "collapsed", trigger: "trigger", nodeTpl: "nodeTpl", expandedAll: "expandedAll", expandedLevel: "expandedLevel", activatedId: "activatedId", target: "target", portalMinWidth: "portalMinWidth" }, outputs: { nodeClick: "nodeClick", activatedIdChange: "activatedIdChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XMenuProperty, selector: "x-menu-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, portalMinWidth: { classPropertyName: "portalMinWidth", publicName: "portalMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XMenuProperty.prototype, "data", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XMenuProperty.prototype, "size", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '12rem')
-], XMenuProperty.prototype, "width", void 0);
-__decorate([
-    XInputBoolean()
-], XMenuProperty.prototype, "collapsed", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'hover')
-], XMenuProperty.prototype, "trigger", void 0);
-__decorate([
-    XInputBoolean()
-], XMenuProperty.prototype, "expandedAll", void 0);
-__decorate([
-    XInputNumber()
-], XMenuProperty.prototype, "expandedLevel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuPrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], collapsed: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], nodeTpl: [{
-                type: Input
-            }], expandedAll: [{
-                type: Input
-            }], expandedLevel: [{
-                type: Input
-            }], activatedId: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], portalMinWidth: [{
-                type: Input
-            }], nodeClick: [{
-                type: Output
-            }], activatedIdChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Menu Node
  * @selector x-menu-node
@@ -120,80 +104,79 @@ const XMenuNodePrefix = 'x-menu-node';
  * Menu Node Property
  */
 class XMenuNodeProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XMenuNodeProperty, selector: "x-menu-node-property", inputs: { node: "node" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XMenuNodeProperty, selector: "x-menu-node-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuNodePrefix}-property`, template: '' }]
-        }], propDecorators: { node: [{
-                type: Input
-            }] } });
+        }] });
 
 class XMenuNodeComponent extends XMenuNodeProperty {
     constructor() {
-        super(...arguments);
-        this.cdr = inject(ChangeDetectorRef);
+        super();
+        this.menu = inject(XMenuComponent, { optional: true });
+        this.routerLink = input();
+        this.leaf = input();
+        this.icon = input();
+        this.label = input();
+        this.open = input();
+        this.id = input();
         this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
-    }
-    ngOnInit() {
-        if (this.menu?.activatedId == this.node.id) {
-            this.menu.activatedElementRef = this.elementRef;
-        }
-        this.node.change = () => {
-            this.cdr.detectChanges();
-        };
+        effect(() => {
+            if (this.menu.activatedId() === this.id()) {
+                this.menu.activatedElementRef.set(this.elementRef);
+            }
+        }, { allowSignalWrites: true });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XMenuNodeComponent, isStandalone: true, selector: "x-menu-node", inputs: { menu: "menu" }, usesInheritance: true, ngImport: i0, template: "@if (node.routerLink && !node.leaf) {\r\n  <a [routerLink]=\"node.routerLink\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (node.icon) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"node.icon\"></x-icon>\r\n  }\r\n  @if (node.label) {\r\n    <span class=\"x-menu-text\">{{ node.label }}</span>\r\n  }\r\n  @if (node.leaf) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"node.open\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XMenuNodeComponent, isStandalone: true, selector: "x-menu-node", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (routerLink() && !leaf()) {\r\n  <a [routerLink]=\"routerLink()\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (icon()) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }}</span>\r\n  }\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"open()\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XMenuNodePrefix}`, standalone: true, imports: [NgTemplateOutlet, XIconComponent, RouterModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node.routerLink && !node.leaf) {\r\n  <a [routerLink]=\"node.routerLink\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (node.icon) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"node.icon\"></x-icon>\r\n  }\r\n  @if (node.label) {\r\n    <span class=\"x-menu-text\">{{ node.label }}</span>\r\n  }\r\n  @if (node.leaf) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"node.open\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n" }]
-        }], propDecorators: { menu: [{
-                type: Input
-            }] } });
+            args: [{ selector: `${XMenuNodePrefix}`, standalone: true, imports: [NgTemplateOutlet, XIconComponent, RouterModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink() && !leaf()) {\r\n  <a [routerLink]=\"routerLink()\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (icon()) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }}</span>\r\n  }\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"open()\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [] });
 
 class XMenuComponent extends XMenuProperty {
-    constructor() {
-        super(...arguments);
-        this.showCategory = false;
-        this.nodeClassMap = {};
-        this.datas = [];
-        this.nodes = [];
-        this.rootIndex = 0;
-        this.expanded = [];
-        this.doc = inject(DOCUMENT);
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
-        this.configService = inject(XConfigService);
-    }
     get scroll() {
         return this._target;
     }
-    ngOnInit() {
-        this.setClassMap();
+    constructor() {
+        super();
+        this.showCategory = signal(false);
+        this.datas = signal([]);
+        this.nodes = signal([]);
+        this.rootIndex = signal(0);
+        this.activated = signal(null);
+        this.activatedElementRef = signal(null);
+        this.expanded = signal([]);
+        this.doc = inject(DOCUMENT);
+        this.classMap = computed(() => ({
+            [`${XMenuPrefix}-${this.layout()}`]: !XIsEmpty(this.layout()),
+            [`${XMenuPrefix}-collapsed`]: this.collapsed()
+        }));
+        this.nodeClassMap = computed(() => ({
+            [`x-size-${this.size()}`]: !XIsEmpty(this.size())
+        }));
+        effect(() => {
+            this.setScrollTop();
+        });
     }
     ngOnChanges(changes) {
-        const { data, activatedId, collapsed, target } = changes;
-        XIsChange(data) && this.setData();
-        XIsChange(activatedId) && this.setActivatedNode(this.datas);
-        XIsChange(collapsed) && this.setClassMap();
+        const { data, activatedId, target } = changes;
+        XIsChange(data) && this.setDataChange(this.data());
+        XIsChange(activatedId) && this.setActivatedNode(this.datas());
         if (XIsChange(target)) {
-            this._target = typeof this.target === 'string' ? this.doc.querySelector(this.target) : this.target;
+            const target = this.target();
+            this._target = typeof target === 'string' ? this.doc.querySelector(target) : target;
         }
     }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    ngAfterViewInit() {
-        if (this.activatedElementRef && this.scroll) {
-            if (typeof this.activatedElementRef.nativeElement.getBoundingClientRect !== 'function') {
+    setScrollTop() {
+        if (this.activatedElementRef() && this.scroll) {
+            if (typeof this.activatedElementRef().nativeElement.getBoundingClientRect !== 'function') {
                 return;
             }
-            const nodeRect = this.activatedElementRef.nativeElement.getBoundingClientRect();
+            const nodeRect = this.activatedElementRef().nativeElement.getBoundingClientRect();
             const scrollRect = this.scroll.getBoundingClientRect();
             let scrollTop = nodeRect.top - scrollRect.top - scrollRect.height;
             if (scrollTop > 0) {
@@ -206,32 +189,28 @@ class XMenuComponent extends XMenuProperty {
         }
     }
     onNodeClick(node) {
-        if (!this.collapsed) {
-            this.rootIndex = this.nodes.indexOf(this.getRoot(node));
-            this.activatedId = node.id;
-            this.activated = node;
+        if (!this.collapsed()) {
+            this.rootIndex.set(this.nodes().indexOf(this.getRoot(node)));
+            this.activatedId.set(node.id);
+            this.activated.set(node);
             this.nodeClick.emit(node);
-            this.activatedIdChange.emit(node.id);
-            this.cdr.detectChanges();
         }
         else {
             this.onToggle(null, node, true);
         }
     }
     rootIndexChange(index) {
-        this.rootIndex = index;
-        let node = this.nodes[index];
-        this.activatedId = node.id;
-        this.activated = node;
+        this.rootIndex.set(index);
+        let node = this.nodes()[index];
+        this.activatedId.set(node.id);
+        this.activated.set(node);
         this.nodeClick.emit(node);
-        this.activatedIdChange.emit(node.id);
-        this.cdr.detectChanges();
     }
     onToggle(event, node, isDropdown = false) {
-        if ((this.collapsed && !isDropdown) || node.categoryNode)
+        if ((this.collapsed() && !isDropdown) || node.categoryNode)
             return;
         if (!node.leaf) {
-            this.activated = node;
+            this.activated.set(node);
         }
         else {
             event?.stopPropagation();
@@ -241,30 +220,16 @@ class XMenuComponent extends XMenuProperty {
             }
         }
         this.nodeClick.emit(node);
-        node.change && node.change();
-        this.cdr.detectChanges();
-    }
-    setClassMap() {
-        this.classMap[`${XMenuPrefix}-${this.layout}`] = this.layout ? true : false;
-        this.classMap[`${XMenuPrefix}-collapsed`] = Boolean(this.collapsed);
-        this.nodeClassMap[`x-size-${this.size}`] = this.size ? true : false;
-        this.cdr.detectChanges();
-    }
-    setData() {
-        XSetData(this.data, this._unSubject).subscribe((x) => {
-            this.setDataChange(x);
-        });
     }
     setDataChange(value) {
-        !XIsEmpty(this.activatedId) && this.setActivatedNode(value);
+        !XIsEmpty(this.activatedId()) && this.setActivatedNode(value);
         let handlerDatas = [];
         const getChildren = (node, level) => {
             node.level = level;
             node.children = value.filter((y) => y.pid === node.id);
             node.leaf = node.children?.length > 0;
             if (node.leaf) {
-                node.open =
-                    Boolean(this.expandedAll) || level <= Number(this.expandedLevel) || this.expanded.indexOf(node.id) >= 0;
+                node.open = this.expandedAll() || level <= this.expandedLevel() || this.expanded().indexOf(node.id) >= 0;
                 node.childrenLoaded = node.open;
                 node.children.map((y) => getChildren(y, level + 1));
                 node.children = this.setCategory(node.children);
@@ -272,14 +237,13 @@ class XMenuComponent extends XMenuProperty {
             handlerDatas = [...handlerDatas, node];
             return node;
         };
-        this.nodes = this.setCategory(value.filter((x) => XIsEmpty(x.pid))).map((x) => getChildren(x, 0));
-        this.datas = handlerDatas;
-        this.cdr.detectChanges();
+        this.nodes.set(this.setCategory(value.filter((x) => XIsEmpty(x.pid))).map((x) => getChildren(x, 0)));
+        this.datas.set(handlerDatas);
     }
     getRoot(value) {
         let root = value;
         const getParent = (node) => {
-            const parent = this.datas.find((x) => node.pid === x.id);
+            const parent = this.datas().find((x) => node.pid === x.id);
             if (XIsEmpty(parent?.pid))
                 root = parent;
             else
@@ -310,10 +274,10 @@ class XMenuComponent extends XMenuProperty {
         return con;
     }
     setActivatedNode(nodes) {
-        this.activated = nodes.find((x) => x.id == this.activatedId);
-        this.rootIndex = nodes.findIndex((x) => x.id == this.activatedId && !x.pid);
-        if (this.activated) {
-            this.setParentOpen(nodes, this.activated);
+        this.activated.set(nodes.find((x) => x.id == this.activatedId()));
+        this.rootIndex.set(nodes.findIndex((x) => x.id == this.activatedId() && !x.pid));
+        if (this.activated()) {
+            this.setParentOpen(nodes, this.activated());
         }
     }
     setParentOpen(nodes, node) {
@@ -322,26 +286,26 @@ class XMenuComponent extends XMenuProperty {
                 return;
             const parent = nodes.find((x) => x.id === child.pid);
             if (!XIsEmpty(parent)) {
-                this.expanded = [...this.expanded, parent.id];
+                this.expanded.set([...this.expanded(), parent.id]);
                 getParent(parent);
             }
         };
         getParent(node);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XMenuComponent, isStandalone: true, selector: "x-menu", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #menu class=\"x-menu\" [ngClass]=\"classMap\" [style.width]=\"layout === 'column' ? width : ''\">\r\n  @if (layout === 'column') {\r\n    <div class=\"x-menu-nodes\">\r\n      @for (node of nodes; track node.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: node, $children: true }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n  @if (layout === 'row') {\r\n    <x-slider\r\n      [data]=\"nodes\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeRowTpl\"\r\n      [nodeJustify]=\"'center'\"\r\n      [activatedIndex]=\"rootIndex\"\r\n      (indexChange)=\"rootIndexChange($event)\"\r\n    ></x-slider>\r\n  }\r\n</div>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node.level === 0 && collapsed) {\r\n    <x-dropdown\r\n      [disabled]=\"!node.leaf\"\r\n      [data]=\"node.children\"\r\n      [trigger]=\"trigger\"\r\n      placement=\"right-start\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      [portalMinWidth]=\"portalMinWidth\"\r\n      children\r\n    >\r\n      <x-menu-node [node]=\"node\" [menu]=\"this\"></x-menu-node>\r\n    </x-dropdown>\r\n  }\r\n  @if (!collapsed) {\r\n    <x-menu-node [node]=\"node\" [menu]=\"this\"></x-menu-node>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nodeRowTpl let-node=\"$node\">\r\n  <x-dropdown\r\n    [disabled]=\"!node.leaf\"\r\n    [data]=\"node.children\"\r\n    [trigger]=\"trigger\"\r\n    [(activatedId)]=\"activatedId\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [portalMinWidth]=\"portalMinWidth\"\r\n    children\r\n  >\r\n    <div class=\"x-menu-node\" [ngClass]=\"nodeClassMap\">\r\n      <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n    </div>\r\n  </x-dropdown>\r\n</ng-template>\r\n\r\n<ng-template #nodeColumnTpl let-node=\"$node\">\r\n  <div\r\n    class=\"x-menu-node\"\r\n    [class.x-activated]=\"activated?.id === node.id\"\r\n    [class.x-menu-category]=\"node.categoryNode\"\r\n    [ngClass]=\"nodeClassMap\"\r\n    (click)=\"onToggle($event, node)\"\r\n    [style.padding-left.rem]=\"(node.level + 1) * 0.875\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n  </div>\r\n  @if (node.childrenLoaded || (node.leaf && node.open)) {\r\n    <div class=\"x-menu-nodes\" [hidden]=\"!node.open\">\r\n      @for (child of node.children; track child.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: child }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["x-menu{display:block}.x-menu{margin:0;padding:0}.x-menu-icon.x-icon{width:1rem;height:1rem;font-size:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon{width:1rem;height:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon.is-open{transform:rotate(180deg)}.x-menu-node.x-size-big{padding:0 calc(var(--x-padding-big) + .25rem);height:calc(var(--x-height-big) + .75rem);line-height:calc(var(--x-height-big) + .75rem)}.x-menu-node.x-size-big.x-menu-category{height:calc(calc(var(--x-height-big) + .75rem) * 1.5)}.x-menu-node.x-size-large{padding:0 calc(var(--x-padding-large) + .25rem);height:calc(var(--x-height-large) + .75rem);line-height:calc(var(--x-height-large) + .75rem)}.x-menu-node.x-size-large.x-menu-category{height:calc(calc(var(--x-height-large) + .75rem) * 1.5)}.x-menu-node.x-size-medium{padding:0 calc(var(--x-padding-medium) + .25rem);height:calc(var(--x-height-medium) + .75rem);line-height:calc(var(--x-height-medium) + .75rem)}.x-menu-node.x-size-medium.x-menu-category{height:calc(calc(var(--x-height-medium) + .75rem) * 1.5)}.x-menu-node.x-size-small{padding:0 var(--x-padding-small);height:calc(var(--x-height-small) + .5rem);line-height:calc(var(--x-height-small) + .5rem)}.x-menu-node.x-size-small.x-menu-category{height:calc(calc(var(--x-height-small) + .5rem) * 1.5)}.x-menu-node.x-size-mini{padding:0 var(--x-padding-mini);height:calc(var(--x-height-mini) + .5rem);line-height:calc(var(--x-height-mini) + .5rem)}.x-menu-node.x-size-mini.x-menu-category{height:calc(calc(var(--x-height-mini) + .5rem) * 1.5)}.x-menu x-slider .x-slider-scroll>ul>li.x-slider-highlight{background-color:inherit;border-radius:0;border:none;border-bottom:.125rem solid var(--x-primary)}.x-menu x-slider .x-slider-scroll>ul>li>x-link{padding:0!important;height:inherit!important;line-height:inherit!important}.x-menu-column{width:16rem;transition:var(--x-animation-duration-base)}.x-menu-row .x-menu-text{margin-left:.25rem}.x-menu-nodes .x-menu-node{cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:width var(--x-animation-duration-base),background-color var(--x-animation-duration-base);border-right:.125rem solid var(--x-border);position:relative;-webkit-user-select:none;user-select:none;padding-right:.875rem}.x-menu-nodes .x-menu-node .x-menu-text{flex:1;margin:0 .25rem;transition:background-color var(--x-animation-duration-base),opacity var(--x-animation-duration-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-menu-nodes .x-menu-node:hover{color:var(--x-primary);background-color:var(--x-background-a100)}.x-menu-nodes .x-menu-node x-menu-node{flex:1;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.x-menu-nodes .x-menu-node x-menu-node>a{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none}.x-menu-nodes .x-menu-node.x-activated{color:var(--x-primary);background-color:var(--x-background-a100)}.x-menu-nodes .x-menu-node.x-activated:after{content:\"\";position:absolute;height:100%;right:-.125rem;top:0;border-right:.125rem solid var(--x-primary)}.x-menu-nodes .x-menu-node.x-menu-category{cursor:inherit;color:var(--x-text-400)}.x-menu-nodes .x-menu-node.x-menu-category:hover{background-color:transparent}.x-menu-nodes .x-menu-node.x-menu-category>x-menu-node{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border-300)}.x-menu-collapsed.x-menu-column{width:3rem}.x-menu-collapsed .x-menu-nodes x-dropdown,.x-menu-collapsed .x-menu-nodes .x-dropdown{display:flex;flex:1}.x-menu-collapsed .x-menu-nodes .x-menu-node{padding-left:0!important;padding-right:0}.x-menu-collapsed .x-menu-nodes .x-menu-node x-menu-node{padding-left:.875rem}.x-menu-collapsed .x-menu-nodes .x-menu-node .x-menu-text{opacity:0;width:0}.x-menu-collapsed .x-menu-nodes .x-menu-nodes{display:none}.x-menu-collapsed .x-menu-arrow.x-icon{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XSliderComponent, selector: "x-slider" }, { kind: "component", type: XDropdownComponent, selector: "x-dropdown" }, { kind: "component", type: XMenuNodeComponent, selector: "x-menu-node", inputs: ["menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XMenuComponent, isStandalone: true, selector: "x-menu", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #menu class=\"x-menu\" [ngClass]=\"classMap()\" [style.width]=\"layout() === 'column' ? width() : ''\">\r\n  @if (layout() === 'column') {\r\n    <div class=\"x-menu-nodes\">\r\n      @for (node of nodes(); track node.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: node, $children: true }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n  @if (layout() === 'row') {\r\n    <x-slider\r\n      [data]=\"nodes()\"\r\n      [size]=\"size()\"\r\n      [nodeTpl]=\"nodeRowTpl\"\r\n      [nodeJustify]=\"'center'\"\r\n      [activatedIndex]=\"rootIndex()\"\r\n      (indexChange)=\"rootIndexChange($event)\"\r\n    ></x-slider>\r\n  }\r\n</div>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node.level === 0 && collapsed()) {\r\n    <x-dropdown\r\n      [disabled]=\"!node.leaf\"\r\n      [data]=\"node.children\"\r\n      [trigger]=\"trigger()\"\r\n      placement=\"right-start\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      [portalMinWidth]=\"portalMinWidth()\"\r\n      [size]=\"size()\"\r\n      children\r\n    >\r\n      <x-menu-node\r\n        [routerLink]=\"node.routerLink\"\r\n        [leaf]=\"node.leaf\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [open]=\"node.open\"\r\n        [id]=\"node.id\"\r\n      ></x-menu-node>\r\n    </x-dropdown>\r\n  }\r\n  @if (!collapsed()) {\r\n    <x-menu-node\r\n      [routerLink]=\"node.routerLink\"\r\n      [leaf]=\"node.leaf\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [open]=\"node.open\"\r\n      [id]=\"node.id\"\r\n    ></x-menu-node>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nodeRowTpl let-node=\"$node\">\r\n  <x-dropdown\r\n    [disabled]=\"!node.leaf\"\r\n    [data]=\"node.children\"\r\n    [trigger]=\"trigger()\"\r\n    [(activatedId)]=\"activatedId\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [portalMinWidth]=\"portalMinWidth()\"\r\n    [size]=\"size()\"\r\n    children\r\n  >\r\n    <div class=\"x-menu-node\" [ngClass]=\"nodeClassMap()\">\r\n      <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n    </div>\r\n  </x-dropdown>\r\n</ng-template>\r\n\r\n<ng-template #nodeColumnTpl let-node=\"$node\">\r\n  <div\r\n    class=\"x-menu-node\"\r\n    [class.x-activated]=\"activated()?.id === node.id\"\r\n    [class.x-menu-category]=\"node.categoryNode\"\r\n    [ngClass]=\"nodeClassMap()\"\r\n    (click)=\"onToggle($event, node)\"\r\n    [style.padding-left.rem]=\"(node.level + 1) * 0.875\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n  </div>\r\n  @if (node.childrenLoaded || (node.leaf && node.open)) {\r\n    <div class=\"x-menu-nodes\" [hidden]=\"!node.open\">\r\n      @for (child of node.children; track child.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: child }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["x-menu{display:block}.x-menu{margin:0;padding:0}.x-menu-icon.x-icon{width:1rem;height:1rem;font-size:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon{width:1rem;height:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon.is-open{transform:rotate(180deg)}.x-menu-node.x-size-big{padding:0 calc(var(--x-padding-big) + .25rem);height:calc(var(--x-height-big) + .75rem);line-height:calc(var(--x-height-big) + .75rem)}.x-menu-node.x-size-big.x-menu-category{height:calc(calc(var(--x-height-big) + .75rem) * 1.5)}.x-menu-node.x-size-large{padding:0 calc(var(--x-padding-large) + .25rem);height:calc(var(--x-height-large) + .75rem);line-height:calc(var(--x-height-large) + .75rem)}.x-menu-node.x-size-large.x-menu-category{height:calc(calc(var(--x-height-large) + .75rem) * 1.5)}.x-menu-node.x-size-medium{padding:0 calc(var(--x-padding-medium) + .25rem);height:calc(var(--x-height-medium) + .75rem);line-height:calc(var(--x-height-medium) + .75rem)}.x-menu-node.x-size-medium.x-menu-category{height:calc(calc(var(--x-height-medium) + .75rem) * 1.5)}.x-menu-node.x-size-small{padding:0 var(--x-padding-small);height:calc(var(--x-height-small) + .5rem);line-height:calc(var(--x-height-small) + .5rem)}.x-menu-node.x-size-small.x-menu-category{height:calc(calc(var(--x-height-small) + .5rem) * 1.5)}.x-menu-node.x-size-mini{padding:0 var(--x-padding-mini);height:calc(var(--x-height-mini) + .5rem);line-height:calc(var(--x-height-mini) + .5rem)}.x-menu-node.x-size-mini.x-menu-category{height:calc(calc(var(--x-height-mini) + .5rem) * 1.5)}.x-menu x-slider .x-slider-scroll>ul>li>x-link{height:inherit!important;line-height:inherit!important}.x-menu-column{width:16rem;transition:var(--x-animation-duration-base)}.x-menu-row .x-menu-text{margin-left:.25rem}.x-menu-nodes .x-menu-node{cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:width var(--x-animation-duration-base),background-color var(--x-animation-duration-base);position:relative;-webkit-user-select:none;user-select:none;padding-right:var(--x-font-size);border-radius:var(--x-border-radius);margin:.125rem 0}.x-menu-nodes .x-menu-node .x-menu-text{flex:1;margin:0 .25rem;transition:background-color var(--x-animation-duration-base),opacity var(--x-animation-duration-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-menu-nodes .x-menu-node:hover{color:var(--x-primary);background-color:var(--x-background-a200)}.x-menu-nodes .x-menu-node x-menu-node{flex:1;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.x-menu-nodes .x-menu-node x-menu-node>a{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;color:var(--x-text)}.x-menu-nodes .x-menu-node.x-activated{color:var(--x-primary);background-color:var(--x-primary-900)}.x-menu-nodes .x-menu-node.x-activated:after{content:\"\";position:absolute;height:100%;right:-.125rem;top:0}.x-menu-nodes .x-menu-node.x-activated x-menu-node>a{color:var(--x-primary)}.x-menu-nodes .x-menu-node.x-menu-category{cursor:inherit;color:var(--x-text-400)}.x-menu-nodes .x-menu-node.x-menu-category:hover{background-color:transparent}.x-menu-nodes .x-menu-node.x-menu-category>x-menu-node{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-menu-collapsed.x-menu-column{width:3rem}.x-menu-collapsed .x-menu-nodes x-dropdown,.x-menu-collapsed .x-menu-nodes .x-dropdown{display:flex;flex:1}.x-menu-collapsed .x-menu-nodes .x-menu-node{padding-left:0!important;padding-right:0}.x-menu-collapsed .x-menu-nodes .x-menu-node x-menu-node{padding-left:var(--x-font-size)}.x-menu-collapsed .x-menu-nodes .x-menu-node .x-menu-text{opacity:0;width:0}.x-menu-collapsed .x-menu-nodes .x-menu-nodes{display:none}.x-menu-collapsed .x-menu-arrow.x-icon{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XSliderComponent, selector: "x-slider" }, { kind: "component", type: XDropdownComponent, selector: "x-dropdown" }, { kind: "component", type: XMenuNodeComponent, selector: "x-menu-node", inputs: ["routerLink", "leaf", "icon", "label", "open", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XMenuPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XSliderComponent, XDropdownComponent, XMenuNodeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menu class=\"x-menu\" [ngClass]=\"classMap\" [style.width]=\"layout === 'column' ? width : ''\">\r\n  @if (layout === 'column') {\r\n    <div class=\"x-menu-nodes\">\r\n      @for (node of nodes; track node.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: node, $children: true }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n  @if (layout === 'row') {\r\n    <x-slider\r\n      [data]=\"nodes\"\r\n      [size]=\"size\"\r\n      [nodeTpl]=\"nodeRowTpl\"\r\n      [nodeJustify]=\"'center'\"\r\n      [activatedIndex]=\"rootIndex\"\r\n      (indexChange)=\"rootIndexChange($event)\"\r\n    ></x-slider>\r\n  }\r\n</div>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node.level === 0 && collapsed) {\r\n    <x-dropdown\r\n      [disabled]=\"!node.leaf\"\r\n      [data]=\"node.children\"\r\n      [trigger]=\"trigger\"\r\n      placement=\"right-start\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      [portalMinWidth]=\"portalMinWidth\"\r\n      children\r\n    >\r\n      <x-menu-node [node]=\"node\" [menu]=\"this\"></x-menu-node>\r\n    </x-dropdown>\r\n  }\r\n  @if (!collapsed) {\r\n    <x-menu-node [node]=\"node\" [menu]=\"this\"></x-menu-node>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nodeRowTpl let-node=\"$node\">\r\n  <x-dropdown\r\n    [disabled]=\"!node.leaf\"\r\n    [data]=\"node.children\"\r\n    [trigger]=\"trigger\"\r\n    [(activatedId)]=\"activatedId\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [portalMinWidth]=\"portalMinWidth\"\r\n    children\r\n  >\r\n    <div class=\"x-menu-node\" [ngClass]=\"nodeClassMap\">\r\n      <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n    </div>\r\n  </x-dropdown>\r\n</ng-template>\r\n\r\n<ng-template #nodeColumnTpl let-node=\"$node\">\r\n  <div\r\n    class=\"x-menu-node\"\r\n    [class.x-activated]=\"activated?.id === node.id\"\r\n    [class.x-menu-category]=\"node.categoryNode\"\r\n    [ngClass]=\"nodeClassMap\"\r\n    (click)=\"onToggle($event, node)\"\r\n    [style.padding-left.rem]=\"(node.level + 1) * 0.875\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n  </div>\r\n  @if (node.childrenLoaded || (node.leaf && node.open)) {\r\n    <div class=\"x-menu-nodes\" [hidden]=\"!node.open\">\r\n      @for (child of node.children; track child.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: child }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["x-menu{display:block}.x-menu{margin:0;padding:0}.x-menu-icon.x-icon{width:1rem;height:1rem;font-size:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon{width:1rem;height:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon.is-open{transform:rotate(180deg)}.x-menu-node.x-size-big{padding:0 calc(var(--x-padding-big) + .25rem);height:calc(var(--x-height-big) + .75rem);line-height:calc(var(--x-height-big) + .75rem)}.x-menu-node.x-size-big.x-menu-category{height:calc(calc(var(--x-height-big) + .75rem) * 1.5)}.x-menu-node.x-size-large{padding:0 calc(var(--x-padding-large) + .25rem);height:calc(var(--x-height-large) + .75rem);line-height:calc(var(--x-height-large) + .75rem)}.x-menu-node.x-size-large.x-menu-category{height:calc(calc(var(--x-height-large) + .75rem) * 1.5)}.x-menu-node.x-size-medium{padding:0 calc(var(--x-padding-medium) + .25rem);height:calc(var(--x-height-medium) + .75rem);line-height:calc(var(--x-height-medium) + .75rem)}.x-menu-node.x-size-medium.x-menu-category{height:calc(calc(var(--x-height-medium) + .75rem) * 1.5)}.x-menu-node.x-size-small{padding:0 var(--x-padding-small);height:calc(var(--x-height-small) + .5rem);line-height:calc(var(--x-height-small) + .5rem)}.x-menu-node.x-size-small.x-menu-category{height:calc(calc(var(--x-height-small) + .5rem) * 1.5)}.x-menu-node.x-size-mini{padding:0 var(--x-padding-mini);height:calc(var(--x-height-mini) + .5rem);line-height:calc(var(--x-height-mini) + .5rem)}.x-menu-node.x-size-mini.x-menu-category{height:calc(calc(var(--x-height-mini) + .5rem) * 1.5)}.x-menu x-slider .x-slider-scroll>ul>li.x-slider-highlight{background-color:inherit;border-radius:0;border:none;border-bottom:.125rem solid var(--x-primary)}.x-menu x-slider .x-slider-scroll>ul>li>x-link{padding:0!important;height:inherit!important;line-height:inherit!important}.x-menu-column{width:16rem;transition:var(--x-animation-duration-base)}.x-menu-row .x-menu-text{margin-left:.25rem}.x-menu-nodes .x-menu-node{cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:width var(--x-animation-duration-base),background-color var(--x-animation-duration-base);border-right:.125rem solid var(--x-border);position:relative;-webkit-user-select:none;user-select:none;padding-right:.875rem}.x-menu-nodes .x-menu-node .x-menu-text{flex:1;margin:0 .25rem;transition:background-color var(--x-animation-duration-base),opacity var(--x-animation-duration-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-menu-nodes .x-menu-node:hover{color:var(--x-primary);background-color:var(--x-background-a100)}.x-menu-nodes .x-menu-node x-menu-node{flex:1;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.x-menu-nodes .x-menu-node x-menu-node>a{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none}.x-menu-nodes .x-menu-node.x-activated{color:var(--x-primary);background-color:var(--x-background-a100)}.x-menu-nodes .x-menu-node.x-activated:after{content:\"\";position:absolute;height:100%;right:-.125rem;top:0;border-right:.125rem solid var(--x-primary)}.x-menu-nodes .x-menu-node.x-menu-category{cursor:inherit;color:var(--x-text-400)}.x-menu-nodes .x-menu-node.x-menu-category:hover{background-color:transparent}.x-menu-nodes .x-menu-node.x-menu-category>x-menu-node{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border-300)}.x-menu-collapsed.x-menu-column{width:3rem}.x-menu-collapsed .x-menu-nodes x-dropdown,.x-menu-collapsed .x-menu-nodes .x-dropdown{display:flex;flex:1}.x-menu-collapsed .x-menu-nodes .x-menu-node{padding-left:0!important;padding-right:0}.x-menu-collapsed .x-menu-nodes .x-menu-node x-menu-node{padding-left:.875rem}.x-menu-collapsed .x-menu-nodes .x-menu-node .x-menu-text{opacity:0;width:0}.x-menu-collapsed .x-menu-nodes .x-menu-nodes{display:none}.x-menu-collapsed .x-menu-arrow.x-icon{opacity:0;width:0}\n"] }]
-        }] });
+            args: [{ selector: `${XMenuPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XSliderComponent, XDropdownComponent, XMenuNodeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menu class=\"x-menu\" [ngClass]=\"classMap()\" [style.width]=\"layout() === 'column' ? width() : ''\">\r\n  @if (layout() === 'column') {\r\n    <div class=\"x-menu-nodes\">\r\n      @for (node of nodes(); track node.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: node, $children: true }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n  @if (layout() === 'row') {\r\n    <x-slider\r\n      [data]=\"nodes()\"\r\n      [size]=\"size()\"\r\n      [nodeTpl]=\"nodeRowTpl\"\r\n      [nodeJustify]=\"'center'\"\r\n      [activatedIndex]=\"rootIndex()\"\r\n      (indexChange)=\"rootIndexChange($event)\"\r\n    ></x-slider>\r\n  }\r\n</div>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node.level === 0 && collapsed()) {\r\n    <x-dropdown\r\n      [disabled]=\"!node.leaf\"\r\n      [data]=\"node.children\"\r\n      [trigger]=\"trigger()\"\r\n      placement=\"right-start\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      [portalMinWidth]=\"portalMinWidth()\"\r\n      [size]=\"size()\"\r\n      children\r\n    >\r\n      <x-menu-node\r\n        [routerLink]=\"node.routerLink\"\r\n        [leaf]=\"node.leaf\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [open]=\"node.open\"\r\n        [id]=\"node.id\"\r\n      ></x-menu-node>\r\n    </x-dropdown>\r\n  }\r\n  @if (!collapsed()) {\r\n    <x-menu-node\r\n      [routerLink]=\"node.routerLink\"\r\n      [leaf]=\"node.leaf\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [open]=\"node.open\"\r\n      [id]=\"node.id\"\r\n    ></x-menu-node>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nodeRowTpl let-node=\"$node\">\r\n  <x-dropdown\r\n    [disabled]=\"!node.leaf\"\r\n    [data]=\"node.children\"\r\n    [trigger]=\"trigger()\"\r\n    [(activatedId)]=\"activatedId\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [portalMinWidth]=\"portalMinWidth()\"\r\n    [size]=\"size()\"\r\n    children\r\n  >\r\n    <div class=\"x-menu-node\" [ngClass]=\"nodeClassMap()\">\r\n      <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n    </div>\r\n  </x-dropdown>\r\n</ng-template>\r\n\r\n<ng-template #nodeColumnTpl let-node=\"$node\">\r\n  <div\r\n    class=\"x-menu-node\"\r\n    [class.x-activated]=\"activated()?.id === node.id\"\r\n    [class.x-menu-category]=\"node.categoryNode\"\r\n    [ngClass]=\"nodeClassMap()\"\r\n    (click)=\"onToggle($event, node)\"\r\n    [style.padding-left.rem]=\"(node.level + 1) * 0.875\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-container>\r\n  </div>\r\n  @if (node.childrenLoaded || (node.leaf && node.open)) {\r\n    <div class=\"x-menu-nodes\" [hidden]=\"!node.open\">\r\n      @for (child of node.children; track child.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: child }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["x-menu{display:block}.x-menu{margin:0;padding:0}.x-menu-icon.x-icon{width:1rem;height:1rem;font-size:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon{width:1rem;height:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon.is-open{transform:rotate(180deg)}.x-menu-node.x-size-big{padding:0 calc(var(--x-padding-big) + .25rem);height:calc(var(--x-height-big) + .75rem);line-height:calc(var(--x-height-big) + .75rem)}.x-menu-node.x-size-big.x-menu-category{height:calc(calc(var(--x-height-big) + .75rem) * 1.5)}.x-menu-node.x-size-large{padding:0 calc(var(--x-padding-large) + .25rem);height:calc(var(--x-height-large) + .75rem);line-height:calc(var(--x-height-large) + .75rem)}.x-menu-node.x-size-large.x-menu-category{height:calc(calc(var(--x-height-large) + .75rem) * 1.5)}.x-menu-node.x-size-medium{padding:0 calc(var(--x-padding-medium) + .25rem);height:calc(var(--x-height-medium) + .75rem);line-height:calc(var(--x-height-medium) + .75rem)}.x-menu-node.x-size-medium.x-menu-category{height:calc(calc(var(--x-height-medium) + .75rem) * 1.5)}.x-menu-node.x-size-small{padding:0 var(--x-padding-small);height:calc(var(--x-height-small) + .5rem);line-height:calc(var(--x-height-small) + .5rem)}.x-menu-node.x-size-small.x-menu-category{height:calc(calc(var(--x-height-small) + .5rem) * 1.5)}.x-menu-node.x-size-mini{padding:0 var(--x-padding-mini);height:calc(var(--x-height-mini) + .5rem);line-height:calc(var(--x-height-mini) + .5rem)}.x-menu-node.x-size-mini.x-menu-category{height:calc(calc(var(--x-height-mini) + .5rem) * 1.5)}.x-menu x-slider .x-slider-scroll>ul>li>x-link{height:inherit!important;line-height:inherit!important}.x-menu-column{width:16rem;transition:var(--x-animation-duration-base)}.x-menu-row .x-menu-text{margin-left:.25rem}.x-menu-nodes .x-menu-node{cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:width var(--x-animation-duration-base),background-color var(--x-animation-duration-base);position:relative;-webkit-user-select:none;user-select:none;padding-right:var(--x-font-size);border-radius:var(--x-border-radius);margin:.125rem 0}.x-menu-nodes .x-menu-node .x-menu-text{flex:1;margin:0 .25rem;transition:background-color var(--x-animation-duration-base),opacity var(--x-animation-duration-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-menu-nodes .x-menu-node:hover{color:var(--x-primary);background-color:var(--x-background-a200)}.x-menu-nodes .x-menu-node x-menu-node{flex:1;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.x-menu-nodes .x-menu-node x-menu-node>a{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;color:var(--x-text)}.x-menu-nodes .x-menu-node.x-activated{color:var(--x-primary);background-color:var(--x-primary-900)}.x-menu-nodes .x-menu-node.x-activated:after{content:\"\";position:absolute;height:100%;right:-.125rem;top:0}.x-menu-nodes .x-menu-node.x-activated x-menu-node>a{color:var(--x-primary)}.x-menu-nodes .x-menu-node.x-menu-category{cursor:inherit;color:var(--x-text-400)}.x-menu-nodes .x-menu-node.x-menu-category:hover{background-color:transparent}.x-menu-nodes .x-menu-node.x-menu-category>x-menu-node{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-menu-collapsed.x-menu-column{width:3rem}.x-menu-collapsed .x-menu-nodes x-dropdown,.x-menu-collapsed .x-menu-nodes .x-dropdown{display:flex;flex:1}.x-menu-collapsed .x-menu-nodes .x-menu-node{padding-left:0!important;padding-right:0}.x-menu-collapsed .x-menu-nodes .x-menu-node x-menu-node{padding-left:var(--x-font-size)}.x-menu-collapsed .x-menu-nodes .x-menu-node .x-menu-text{opacity:0;width:0}.x-menu-collapsed .x-menu-nodes .x-menu-nodes{display:none}.x-menu-collapsed .x-menu-arrow.x-icon{opacity:0;width:0}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XMenuModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XMenuComponent, XMenuNodeComponent],