@ng-nest/ui 20.1.6 → 20.2.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 { XPropertyFunction, XToBoolean, XToNumber } from '@ng-nest/ui/core';\r\nimport { Component, input, TemplateRef } 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 Loading 类型\r\n   * @en_US Loading type\r\n   */\r\n  readonly type = input<XLoadingType>(this.config?.type ?? 'circular');\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 | null>(this.config?.text ?? null);\r\n  /**\r\n   * @zh_CN 显示的图标\r\n   * @en_US Icon displayed\r\n   */\r\n  readonly icon = input<string | null>(this.config?.icon ?? null);\r\n  /**\r\n   * @zh_CN 自定义 loading 模板\r\n   * @en_US Svg tpl\r\n   */\r\n  readonly customTpl = input<TemplateRef<void>>();\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  readonly color = input<string | null>(this.config?.color ?? null);\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 | null>(this.config?.background ?? null);\r\n  /**\r\n   * @zh_CN 行内显示\r\n   * @en_US Inline display\r\n   */\r\n  readonly inline = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN Loading 类型\r\n * @en_US Loading type\r\n */\r\nexport type XLoadingType = 'circular' | 'spinner' | 'ripple' | 'dual-ring' | 'dual-ball' | 'bars';\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  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      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  }\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      [class.x-loading-inline]=\"inline()\"\r\n    >\r\n      <div class=\"x-loading-inner\" [style.color]=\"color()\">\r\n        @if (customTpl()) {\r\n          <ng-template *ngTemplateOutlet=\"customTpl()!\"></ng-template>\r\n        } @else {\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            @switch (type()) {\r\n              @case ('circular') {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n              @case ('spinner') {\r\n                <ng-container *ngTemplateOutlet=\"spinnerTpl\"></ng-container>\r\n              }\r\n              @case ('ripple') {\r\n                <ng-container *ngTemplateOutlet=\"rippleTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ring') {\r\n                <ng-container *ngTemplateOutlet=\"dualRingTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ball') {\r\n                <ng-container *ngTemplateOutlet=\"dualBallTpl\"></ng-container>\r\n              }\r\n              @case ('bars') {\r\n                <ng-container *ngTemplateOutlet=\"barsTpl\"></ng-container>\r\n              }\r\n              @default {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n            }\r\n          }\r\n        }\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>\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</ng-template>\r\n\r\n<ng-template #spinnerTpl>\r\n  <svg class=\"x-loading-spinner\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"25 25 50 50\">\r\n    <g>\r\n      <g transform=\"rotate(0 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.9166666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(30 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.8333333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(60 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.75s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(90 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.6666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(120 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5833333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(150 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(180 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.4166666666666667s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(210 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.3333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(240 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.25s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(270 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.16666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(300 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.08333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(330 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"0s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g></g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #rippleTpl>\r\n  <svg class=\"x-loading-ripple\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualRingTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ring\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle\r\n        stroke-linecap=\"round\"\r\n        fill=\"none\"\r\n        stroke-dasharray=\"50.26548245743669 50.26548245743669\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"8\"\r\n        r=\"32\"\r\n        cy=\"50\"\r\n        cx=\"50\"\r\n      >\r\n        <animateTransform\r\n          values=\"0 50 50;360 50 50\"\r\n          keyTimes=\"0;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          type=\"rotate\"\r\n          attributeName=\"transform\"\r\n        ></animateTransform>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualBallTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ball\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"var(--x-primary-500)\" cy=\"50\" cx=\"70\">\r\n        <animate\r\n          begin=\"0s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n        <animate\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          keyTimes=\"0;0.499;0.5;1\"\r\n          calcMode=\"discrete\"\r\n          values=\"0;0;1;1\"\r\n          attributeName=\"fill-opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #barsTpl>\r\n  <svg class=\"x-loading-bars\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <rect fill=\"currentColor\" height=\"40\" width=\"10\" y=\"30\" x=\"15\">\r\n        <animate\r\n          begin=\"-0.6\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-200)\" height=\"40\" width=\"10\" y=\"30\" x=\"35\">\r\n        <animate\r\n          begin=\"-0.4\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-400)\" height=\"40\" width=\"10\" y=\"30\" x=\"55\">\r\n        <animate\r\n          begin=\"-0.2\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-600)\" height=\"40\" width=\"10\" y=\"30\" x=\"75\">\r\n        <animate\r\n          begin=\"-1\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n</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, TemplateRef } 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 Loading 类型\r\n   * @en_US Loading type\r\n   */\r\n  readonly type = input<XLoadingType>(this.config?.type ?? 'circular');\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 | null>(this.config?.text ?? null);\r\n  /**\r\n   * @zh_CN 显示的图标\r\n   * @en_US Icon displayed\r\n   */\r\n  readonly icon = input<string | null>(this.config?.icon ?? null);\r\n  /**\r\n   * @zh_CN 自定义 loading 模板\r\n   * @en_US Svg tpl\r\n   */\r\n  readonly customTpl = input<TemplateRef<void>>();\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  readonly color = input<string | null>(this.config?.color ?? null);\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 | null>(this.config?.background ?? null);\r\n  /**\r\n   * @zh_CN 行内显示\r\n   * @en_US Inline display\r\n   */\r\n  readonly inline = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN Loading 类型\r\n * @en_US Loading type\r\n */\r\nexport type XLoadingType = 'circular' | 'spinner' | 'ripple' | 'dual-ring' | 'dual-ball' | 'bars';\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  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      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  }\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      [class.x-loading-inline]=\"inline()\"\r\n    >\r\n      <div class=\"x-loading-inner\" [style.color]=\"color()\">\r\n        @if (customTpl()) {\r\n          <ng-template *ngTemplateOutlet=\"customTpl()!\"></ng-template>\r\n        } @else {\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            @switch (type()) {\r\n              @case ('circular') {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n              @case ('spinner') {\r\n                <ng-container *ngTemplateOutlet=\"spinnerTpl\"></ng-container>\r\n              }\r\n              @case ('ripple') {\r\n                <ng-container *ngTemplateOutlet=\"rippleTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ring') {\r\n                <ng-container *ngTemplateOutlet=\"dualRingTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ball') {\r\n                <ng-container *ngTemplateOutlet=\"dualBallTpl\"></ng-container>\r\n              }\r\n              @case ('bars') {\r\n                <ng-container *ngTemplateOutlet=\"barsTpl\"></ng-container>\r\n              }\r\n              @default {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n            }\r\n          }\r\n        }\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>\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</ng-template>\r\n\r\n<ng-template #spinnerTpl>\r\n  <svg class=\"x-loading-spinner\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"25 25 50 50\">\r\n    <g>\r\n      <g transform=\"rotate(0 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.9166666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(30 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.8333333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(60 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.75s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(90 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.6666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(120 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5833333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(150 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(180 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.4166666666666667s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(210 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.3333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(240 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.25s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(270 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.16666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(300 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.08333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(330 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"0s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g></g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #rippleTpl>\r\n  <svg class=\"x-loading-ripple\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualRingTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ring\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle\r\n        stroke-linecap=\"round\"\r\n        fill=\"none\"\r\n        stroke-dasharray=\"50.26548245743669 50.26548245743669\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"8\"\r\n        r=\"32\"\r\n        cy=\"50\"\r\n        cx=\"50\"\r\n      >\r\n        <animateTransform\r\n          values=\"0 50 50;360 50 50\"\r\n          keyTimes=\"0;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          type=\"rotate\"\r\n          attributeName=\"transform\"\r\n        ></animateTransform>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualBallTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ball\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"var(--x-primary-500)\" cy=\"50\" cx=\"70\">\r\n        <animate\r\n          begin=\"0s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n        <animate\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          keyTimes=\"0;0.499;0.5;1\"\r\n          calcMode=\"discrete\"\r\n          values=\"0;0;1;1\"\r\n          attributeName=\"fill-opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #barsTpl>\r\n  <svg class=\"x-loading-bars\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <rect fill=\"currentColor\" height=\"40\" width=\"10\" y=\"30\" x=\"15\">\r\n        <animate\r\n          begin=\"-0.6\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-200)\" height=\"40\" width=\"10\" y=\"30\" x=\"35\">\r\n        <animate\r\n          begin=\"-0.4\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-400)\" height=\"40\" width=\"10\" y=\"30\" x=\"55\">\r\n        <animate\r\n          begin=\"-0.2\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-600)\" height=\"40\" width=\"10\" y=\"30\" x=\"75\">\r\n        <animate\r\n          begin=\"-1\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n</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

@@ -87,13 +87,13 @@ class XMenuProperty extends XPropertyFunction(X_MENU_CONFIG_NAME) {
          */
         this.nodeClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XMenuProperty, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XMenuProperty, isStandalone: true, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuPrefix}-property`, template: '' }]
-        }] });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], expandedAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAll", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], portalMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMinWidth", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
 /**
  * Menu Node
  * @selector x-menu-node
@@ -104,10 +104,10 @@ const XMenuNodePrefix = 'x-menu-node';
  * Menu Node Property
  */
 class XMenuNodeProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XMenuNodeProperty, isStandalone: true, selector: "x-menu-node-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XMenuNodeProperty, isStandalone: true, selector: "x-menu-node-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuNodePrefix}-property`, template: '' }]
         }] });
@@ -131,13 +131,13 @@ class XMenuNodeComponent extends XMenuNodeProperty {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", 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 (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", 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 }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", 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 (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\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: "20.3.0", ngImport: i0, type: XMenuNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuNodePrefix}`, 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 (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], leaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaf", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }] } });
 
 class XMenuComponent extends XMenuProperty {
     get scroll() {
@@ -298,20 +298,20 @@ class XMenuComponent extends XMenuProperty {
         };
         getParent(node);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 #nodeTemplate 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        [nodeTpl]=\"nodeTpl()\"\r\n        [node]=\"node\"\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      [nodeTpl]=\"nodeTpl()\"\r\n      [node]=\"node\"\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=\"nodeTemplate; 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=\"nodeTemplate; 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!important}.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", "node", "nodeTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", 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 #nodeTemplate 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        [nodeTpl]=\"nodeTpl()\"\r\n        [node]=\"node\"\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      [nodeTpl]=\"nodeTpl()\"\r\n      [node]=\"node\"\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=\"nodeTemplate; 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=\"nodeTemplate; 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!important}.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", "node", "nodeTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuPrefix}`, 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 #nodeTemplate 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        [nodeTpl]=\"nodeTpl()\"\r\n        [node]=\"node\"\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      [nodeTpl]=\"nodeTpl()\"\r\n      [node]=\"node\"\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=\"nodeTemplate; 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=\"nodeTemplate; 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!important}.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: "20.3.0", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XMenuComponent, XMenuNodeComponent],

package/fesm2022/ng-nest-ui-message-box.mjs

@@ -110,10 +110,10 @@ class XMessageBoxComponent {
             XFormInputValidator(this.msgInput.inputValidator)
         ]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XMessageBoxComponent, isStandalone: true, selector: "x-message-box", ngImport: i0, template: "@if (!msgInput.hide) {\r\n  <div\r\n    class=\"x-message-box\"\r\n    [@x-move-box-animation]=\"msgInput.placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n  >\r\n    <x-alert\r\n      (close)=\"onClose()\"\r\n      [title]=\"msgInput.title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"msgInput.type!\"\r\n      [effect]=\"msgInput.effect!\"\r\n      [hideClose]=\"msgInput.hideClose!\"\r\n      [closeText]=\"msgInput.closeText\"\r\n      [showIcon]=\"false\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n    <ng-template #contentTpl let-iconTpl=\"$iconTpl\">\r\n      <div class=\"x-message-box-inner\">\r\n        <div class=\"x-message-box-content\">\r\n          @if (msgInput.showInput) {\r\n            <form [formGroup]=\"formGroup\">\r\n              <x-input\r\n                formControlName=\"inputValue\"\r\n                [type]=\"msgInput.inputType!\"\r\n                [label]=\"getLabel\"\r\n                [placeholder]=\"msgInput.inputPlaceholder!\"\r\n                [pattern]=\"getPattern\"\r\n                [message]=\"msgInput.inputInvalidMessage!\"\r\n                [inputValidator]=\"msgInput.inputValidator!\"\r\n              ></x-input>\r\n            </form>\r\n          } @else if (msgInput.showTextarea) {\r\n            <form [formGroup]=\"formGroup\">\r\n              <x-textarea\r\n                formControlName=\"inputValue\"\r\n                [placeholder]=\"msgInput.inputPlaceholder!\"\r\n                [label]=\"getLabel\"\r\n                [pattern]=\"getPattern\"\r\n                [message]=\"msgInput.inputInvalidMessage!\"\r\n                [inputValidator]=\"msgInput.inputValidator!\"\r\n                [maxlength]=\"msgInput.textareaMaxlength!\"\r\n                [height]=\"msgInput.textareaHeight!\"\r\n              ></x-textarea>\r\n            </form>\r\n          } @else {\r\n            @if (msgInput.showIcon) {\r\n              <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n            }\r\n            <ng-container *xOutlet=\"msgInput.content\">\r\n              {{ msgInput.content }}\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        <x-buttons space=\"0.5rem\">\r\n          @if (msgInput.showCancel) {\r\n            <x-button (click)=\"onCancel()\" flat plain>{{ msgInput.cancelText }}</x-button>\r\n          }\r\n          <x-button type=\"primary\" flat (click)=\"onConfirm()\" [disabled]=\"formGroup!.invalid\" [loading]=\"loading\">{{\r\n            msgInput.confirmText\r\n          }}</x-button>\r\n        </x-buttons>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n}\r\n", styles: [".x-message-box{margin:0;padding:0}.x-message-box-inner{display:flex;flex-direction:column;margin:.5rem 0}.x-message-box-inner>x-buttons{margin-top:1rem;align-self:flex-end}.x-message-box-content{display:inline-flex}.x-message-box-content>form{width:100%;margin-bottom:1rem}.x-message-box-content>form>x-input{width:100%}.x-message-box-content>form>x-textarea{width:100%}.x-message-box-portal x-message-box{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XTextareaComponent, selector: "x-textarea" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XAlertComponent, selector: "x-alert" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XMessageBoxComponent, isStandalone: true, selector: "x-message-box", ngImport: i0, template: "@if (!msgInput.hide) {\r\n  <div\r\n    class=\"x-message-box\"\r\n    [@x-move-box-animation]=\"msgInput.placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n  >\r\n    <x-alert\r\n      (close)=\"onClose()\"\r\n      [title]=\"msgInput.title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"msgInput.type!\"\r\n      [effect]=\"msgInput.effect!\"\r\n      [hideClose]=\"msgInput.hideClose!\"\r\n      [closeText]=\"msgInput.closeText\"\r\n      [showIcon]=\"false\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n    <ng-template #contentTpl let-iconTpl=\"$iconTpl\">\r\n      <div class=\"x-message-box-inner\">\r\n        <div class=\"x-message-box-content\">\r\n          @if (msgInput.showInput) {\r\n            <form [formGroup]=\"formGroup\">\r\n              <x-input\r\n                formControlName=\"inputValue\"\r\n                [type]=\"msgInput.inputType!\"\r\n                [label]=\"getLabel\"\r\n                [placeholder]=\"msgInput.inputPlaceholder!\"\r\n                [pattern]=\"getPattern\"\r\n                [message]=\"msgInput.inputInvalidMessage!\"\r\n                [inputValidator]=\"msgInput.inputValidator!\"\r\n              ></x-input>\r\n            </form>\r\n          } @else if (msgInput.showTextarea) {\r\n            <form [formGroup]=\"formGroup\">\r\n              <x-textarea\r\n                formControlName=\"inputValue\"\r\n                [placeholder]=\"msgInput.inputPlaceholder!\"\r\n                [label]=\"getLabel\"\r\n                [pattern]=\"getPattern\"\r\n                [message]=\"msgInput.inputInvalidMessage!\"\r\n                [inputValidator]=\"msgInput.inputValidator!\"\r\n                [maxlength]=\"msgInput.textareaMaxlength!\"\r\n                [height]=\"msgInput.textareaHeight!\"\r\n              ></x-textarea>\r\n            </form>\r\n          } @else {\r\n            @if (msgInput.showIcon) {\r\n              <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n            }\r\n            <ng-container *xOutlet=\"msgInput.content\">\r\n              {{ msgInput.content }}\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        <x-buttons space=\"0.5rem\">\r\n          @if (msgInput.showCancel) {\r\n            <x-button (click)=\"onCancel()\" flat plain>{{ msgInput.cancelText }}</x-button>\r\n          }\r\n          <x-button type=\"primary\" flat (click)=\"onConfirm()\" [disabled]=\"formGroup!.invalid\" [loading]=\"loading\">{{\r\n            msgInput.confirmText\r\n          }}</x-button>\r\n        </x-buttons>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n}\r\n", styles: [".x-message-box{margin:0;padding:0}.x-message-box-inner{display:flex;flex-direction:column;margin:.5rem 0}.x-message-box-inner>x-buttons{margin-top:1rem;align-self:flex-end}.x-message-box-content{display:inline-flex}.x-message-box-content>form{width:100%;margin-bottom:1rem}.x-message-box-content>form>x-input{width:100%}.x-message-box-content>form>x-textarea{width:100%}.x-message-box-portal x-message-box{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XTextareaComponent, selector: "x-textarea" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XAlertComponent, selector: "x-alert" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMessageBoxPrefix}`, imports: [
                         NgTemplateOutlet,
@@ -210,20 +210,20 @@ class XMessageBoxService {
         const messageBoxLocale = this.i18n.getLocale().messageBox;
         this.default = { ...this.default, ...messageBoxLocale };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class XMessageBoxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],

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

@@ -40,10 +40,10 @@ class XMessageComponent {
                 .subscribe(() => this.onClose(item));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XMessageComponent, isStandalone: true, selector: "x-message", ngImport: i0, template: "<div class=\"x-message\">\r\n  @for (item of message.list; track item.id) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText!\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-message{margin:0;padding:0}.x-message>x-alert{padding:.25rem 0}.x-message>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-message-portal x-message{width:100%}\n"], dependencies: [{ kind: "component", type: XAlertComponent, selector: "x-alert" }], animations: [XMoveAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XMessageComponent, isStandalone: true, selector: "x-message", ngImport: i0, template: "<div class=\"x-message\">\r\n  @for (item of message.list; track item.id) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText!\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-message{margin:0;padding:0}.x-message>x-alert{padding:.25rem 0}.x-message>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-message-portal x-message{width:100%}\n"], dependencies: [{ kind: "component", type: XAlertComponent, selector: "x-alert" }], animations: [XMoveAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMessagePrefix}`, imports: [XAlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveAnimation], template: "<div class=\"x-message\">\r\n  @for (item of message.list; track item.id) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText!\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-message{margin:0;padding:0}.x-message>x-alert{padding:.25rem 0}.x-message>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-message-portal x-message{width:100%}\n"] }]
         }] });
@@ -190,20 +190,20 @@ class XMessageService {
             refs.ref.componentRef?.instance.cdr.detectChanges();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class XMessageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XMessageModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XMessageModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XMessageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMessageModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],

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

@@ -41,10 +41,10 @@ class XNotificationComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XNotificationComponent, isStandalone: true, selector: "x-notification", ngImport: i0, template: "<div class=\"x-notification\">\r\n  @for (item of notification.list; track item) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-notification{margin:0;padding:0}.x-notification>x-alert{padding:.25rem}.x-notification>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-notification>x-alert .x-alert-icon.x-icon{margin-top:.125rem;font-size:1.25rem;align-self:flex-start}.x-notification-portal x-notification{width:100%}\n"], dependencies: [{ kind: "component", type: XAlertComponent, selector: "x-alert" }], animations: [XMoveAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XNotificationComponent, isStandalone: true, selector: "x-notification", ngImport: i0, template: "<div class=\"x-notification\">\r\n  @for (item of notification.list; track item) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-notification{margin:0;padding:0}.x-notification>x-alert{padding:.25rem}.x-notification>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-notification>x-alert .x-alert-icon.x-icon{margin-top:.125rem;font-size:1.25rem;align-self:flex-start}.x-notification-portal x-notification{width:100%}\n"], dependencies: [{ kind: "component", type: XAlertComponent, selector: "x-alert" }], animations: [XMoveAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XNotificationPrefix}`, imports: [XAlertComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveAnimation], template: "<div class=\"x-notification\">\r\n  @for (item of notification.list; track item) {\r\n    <x-alert\r\n      [@x-move-animation]=\"item.placement\"\r\n      (@x-move-animation.done)=\"moveDone($event)\"\r\n      (mouseenter)=\"onEnter(item)\"\r\n      (mouseleave)=\"onLeave(item)\"\r\n      (close)=\"onClose(item)\"\r\n      [hide]=\"item.hide!\"\r\n      [title]=\"item.title\"\r\n      [content]=\"item.content\"\r\n      [type]=\"item.type!\"\r\n      [effect]=\"item.effect!\"\r\n      [hideClose]=\"item.hideClose!\"\r\n      [closeText]=\"item.closeText\"\r\n      [showIcon]=\"item.showIcon!\"\r\n      [duration]=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  }\r\n</div>\r\n", styles: [".x-notification{margin:0;padding:0}.x-notification>x-alert{padding:.25rem}.x-notification>x-alert>.x-alert{box-shadow:var(--x-box-shadow)}.x-notification>x-alert .x-alert-icon.x-icon{margin-top:.125rem;font-size:1.25rem;align-self:flex-start}.x-notification-portal x-notification{width:100%}\n"] }]
         }] });
@@ -140,20 +140,20 @@ class XNotificationService {
             return;
         this.notifications[option.placement].ref?.componentRef?.instance.onClose(option);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class XNotificationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XNotificationModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XNotificationModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XNotificationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [],

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

@@ -63,20 +63,20 @@ class XOutletDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: XOutletDirective, isStandalone: true, selector: "[xOutlet]", inputs: { xOutletContext: { classPropertyName: "xOutletContext", publicName: "xOutletContext", isSignal: true, isRequired: false, transformFunction: null }, xOutlet: { classPropertyName: "xOutlet", publicName: "xOutlet", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.5", type: XOutletDirective, isStandalone: true, selector: "[xOutlet]", inputs: { xOutletContext: { classPropertyName: "xOutletContext", publicName: "xOutletContext", isSignal: true, isRequired: false, transformFunction: null }, xOutlet: { classPropertyName: "xOutlet", publicName: "xOutlet", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XOutletDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[xOutlet]' }]
-        }] });
+        }], propDecorators: { xOutletContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "xOutletContext", required: false }] }], xOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "xOutlet", required: false }] }] } });
 
 class XOutletModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XOutletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XOutletModule, imports: [XOutletDirective], exports: [XOutletDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XOutletModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XOutletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XOutletModule, imports: [XOutletDirective], exports: [XOutletDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XOutletModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XOutletModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XOutletModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XOutletDirective],