@ng-nest/ui 17.0.12 → 18.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-button.mjs","sources":["../../../../lib/ng-nest/ui/button/button.property.ts","../../../../lib/ng-nest/ui/button/buttons.component.ts","../../../../lib/ng-nest/ui/button/button.component.ts","../../../../lib/ng-nest/ui/button/button.component.html","../../../../lib/ng-nest/ui/button/button.module.ts","../../../../lib/ng-nest/ui/button/ng-nest-ui-button.ts"],"sourcesContent":["import { Input, Component } from '@angular/core';\r\nimport {\r\n  XProperty,\r\n  XDirection,\r\n  XSize,\r\n  XInputBoolean,\r\n  XInputNumber,\r\n  XNumber,\r\n  XBoolean,\r\n  XType,\r\n  XWithConfig\r\n} from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Button\r\n * @selector x-button\r\n * @decorator component\r\n */\r\nexport const XButtonPrefix = 'x-button';\r\nconst X_CONFIG_NAME = 'button';\r\n\r\n/**\r\n * Button Property\r\n */\r\n@Component({ selector: `${XButtonPrefix}-property`, template: '' })\r\nexport class XButtonProperty extends XProperty implements XButtonOption {\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Types of\r\n   */\r\n  @Input() @XWithConfig<XButtonType>(X_CONFIG_NAME, 'initial') type?: XButtonType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  @Input() icon?: string;\r\n  /**\r\n   * @zh_CN 提示\r\n   * @en_US Title\r\n   */\r\n  @Input() title?: string = '';\r\n  /**\r\n   * @zh_CN 布局方式\r\n   * @en_US Layout\r\n   */\r\n  @Input() direction: XDirection = 'row';\r\n  /**\r\n   * @zh_CN tab 键控制次序\r\n   * @en_US Tab key control order\r\n   */\r\n  @Input() tabindex: number = 0;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size?: XSize;\r\n  /**\r\n   * @zh_CN 仅显示图标\r\n   * @en_US Icon only\r\n   */\r\n  @Input() @XInputBoolean() onlyIcon?: XBoolean;\r\n  /**\r\n   * @zh_CN 激活的按钮（样式差异）\r\n   * @en_US Active button (style difference)\r\n   */\r\n  @Input() @XInputBoolean() activated?: XBoolean;\r\n  /**\r\n   * @zh_CN 禁用按钮\r\n   * @en_US Disable button\r\n   */\r\n  @Input() @XInputBoolean() disabled?: XBoolean;\r\n  /**\r\n   * @zh_CN 朴素按钮\r\n   * @en_US Plain button\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME) @XInputBoolean() plain?: XBoolean;\r\n  /**\r\n   * @zh_CN 圆角按钮\r\n   * @en_US Round button\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME) @XInputBoolean() round?: XBoolean;\r\n  /**\r\n   * @zh_CN 圆型按钮（配合图标来使用）\r\n   * @en_US Round button (use with icon)\r\n   */\r\n  @Input() @XInputBoolean() circle?: XBoolean;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  @Input() @XInputBoolean() loading?: XBoolean;\r\n  /**\r\n   * @zh_CN 关闭按钮\r\n   * @en_US Close button\r\n   */\r\n  @Input() @XInputBoolean() closable?: XBoolean;\r\n  /**\r\n   * @zh_CN 按钮类型属性 submit,button,reset\r\n   * @en_US Button type attribute. submit,button,reset\r\n   */\r\n  @Input() @XWithConfig<XButtonAttrType>(X_CONFIG_NAME, 'button') attrType?: XButtonAttrType;\r\n}\r\n\r\n/**\r\n * Button Option\r\n * @undocument true\r\n */\r\nexport interface XButtonOption {\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Types of\r\n   */\r\n  type?: XButtonType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  icon?: string;\r\n  /**\r\n   * @zh_CN 提示\r\n   * @en_US Title\r\n   */\r\n  title?: string;\r\n  /**\r\n   * @zh_CN 布局方式\r\n   * @en_US Layout\r\n   */\r\n  direction?: XDirection;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  size?: XSize;\r\n  /**\r\n   * @zh_CN 仅显示图标\r\n   * @en_US Icon only\r\n   */\r\n  onlyIcon?: XBoolean;\r\n  /**\r\n   * @zh_CN 激活的按钮（样式差异）\r\n   * @en_US Active button (style difference)\r\n   */\r\n  activated?: XBoolean;\r\n  /**\r\n   * @zh_CN 禁用按钮\r\n   * @en_US Disable button\r\n   */\r\n  disabled?: XBoolean;\r\n  /**\r\n   * @zh_CN 朴素按钮\r\n   * @en_US Plain button\r\n   */\r\n  plain?: XBoolean;\r\n  /**\r\n   * @zh_CN 圆角按钮\r\n   * @en_US Round button\r\n   */\r\n  round?: XBoolean;\r\n  /**\r\n   * @zh_CN 圆型按钮（配合图标来使用）\r\n   * @en_US Round button (use with icon)\r\n   */\r\n  circle?: XBoolean;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  loading?: XBoolean;\r\n  /**\r\n   * @zh_CN 关闭按钮\r\n   * @en_US Close button\r\n   */\r\n  closable?: XBoolean;\r\n}\r\n\r\n/**\r\n * @zh_CN 按钮类型\r\n * @en_US Button type\r\n */\r\nexport type XButtonType = XType;\r\n\r\n/**\r\n * @zh_CN 按钮类型属性\r\n * @en_US Button attr type\r\n */\r\nexport type XButtonAttrType = 'submit' | 'button' | 'reset';\r\n\r\n/**\r\n * Buttons\r\n * @selector x-buttons\r\n * @decorator component\r\n */\r\nexport const XButtonsPrefix = 'x-buttons';\r\nconst X_CONFIG_NAME_BUTTONS = 'buttons';\r\n\r\n/**\r\n * Buttons Property\r\n */\r\n@Component({ selector: `${XButtonsPrefix}-property`, template: '' })\r\nexport class XButtonsProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 按钮间距，单位 rem （按 1rem = 16px 比例来计算）\r\n   * @en_US Button spacing, unit rem (calculated according to the ratio of 1rem = 16px)\r\n   */\r\n  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME_BUTTONS, 0) @XInputNumber() space?: XNumber;\r\n  /**\r\n   * @zh_CN 隐藏边框\r\n   * @en_US Hide border\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME_BUTTONS) @XInputBoolean() hiddenBorder?: XBoolean;\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  HostBinding,\r\n  inject\r\n} from '@angular/core';\r\nimport { XButtonsPrefix, XButtonsProperty } from './button.property';\r\nimport { XConfigService } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XButtonsPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./buttons.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XButtonsComponent extends XButtonsProperty implements OnInit {\r\n  @HostBinding('class.x-buttons-space') get getSpace() {\r\n    return this.space;\r\n  }\r\n  @HostBinding('class.x-buttons-hiddenBorder') get getHiddenBorder() {\r\n    return this.hiddenBorder;\r\n  }\r\n\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit() {\r\n    this.renderer.addClass(this.elementRef.nativeElement, XButtonsPrefix);\r\n    this.setSpace();\r\n  }\r\n\r\n  setSpace() {\r\n    if (!this.space) return;\r\n    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `-${Number(this.space) / 2}rem`);\r\n    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `-${Number(this.space) / 2}rem`);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  OnChanges,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  SimpleChanges,\r\n  ChangeDetectorRef,\r\n  ElementRef,\r\n  Renderer2,\r\n  ViewChild,\r\n  inject\r\n} from '@angular/core';\r\nimport { XIsChange, XConfigService, XIsEmpty, XClearClass } from '@ng-nest/ui/core';\r\nimport { delay, of } from 'rxjs';\r\nimport { XButtonPrefix, XButtonProperty } from './button.property';\r\nimport { XButtonsComponent } from './buttons.component';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XRippleDirective } from '@ng-nest/ui/ripple';\r\nimport { NgClass } from '@angular/common';\r\n\r\n@Component({\r\n  selector: `${XButtonPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, XIconComponent, XRippleDirective],\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XButtonComponent extends XButtonProperty implements OnInit, OnChanges {\r\n  transition = false;\r\n  @ViewChild('buttonRef', { static: true }) buttonRef!: ElementRef;\r\n\r\n  private buttons = inject(XButtonsComponent, { optional: true, host: true });\r\n  private cdr = inject(ChangeDetectorRef);\r\n  private elementRef = inject(ElementRef);\r\n  private renderer = inject(Renderer2);\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit(): void {\r\n    this.setSpace();\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { loading, disabled, activated, type, plain, size, direction } = changes;\r\n    XIsChange(loading, disabled) && this.setDisabled();\r\n    XIsChange(activated) && this.cdr.detectChanges();\r\n    XIsChange(type, plain, size, direction) && this.setClassMap();\r\n  }\r\n\r\n  setClassMap() {\r\n    XClearClass(this.classMap);\r\n    this.classMap = {\r\n      [`${XButtonPrefix}-${this.type}`]: !XIsEmpty(this.type) && XIsEmpty(this.plain),\r\n      [`${XButtonPrefix}-${this.type}-plain`]: !XIsEmpty(this.type) && !XIsEmpty(this.plain),\r\n      [`${XButtonPrefix}-plain`]: XIsEmpty(this.type) && !XIsEmpty(this.plain),\r\n      [`x-size-${this.size}`]: !XIsEmpty(this.size),\r\n      [`x-direction-${this.direction}`]: !XIsEmpty(this.direction)\r\n    };\r\n    if (!this.transition)\r\n      of(true)\r\n        .pipe(delay(0))\r\n        .subscribe(() => {\r\n          this.transition = true;\r\n          this.cdr.detectChanges();\r\n        });\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  setSpace() {\r\n    if (!this.buttons?.space) return;\r\n    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `${Number(this.buttons.space) / 2}rem`);\r\n    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `${Number(this.buttons.space) / 2}rem`);\r\n  }\r\n\r\n  setDisabled() {\r\n    if (this.loading || this.disabled) {\r\n      this.renderer.setStyle(this.elementRef.nativeElement, 'pointer-events', 'none');\r\n      this.renderer.setStyle(this.buttonRef?.nativeElement, 'disabled', 'none');\r\n    } else {\r\n      this.renderer.removeStyle(this.elementRef.nativeElement, 'pointer-events');\r\n      this.renderer.removeStyle(this.buttonRef?.nativeElement, 'disabled');\r\n    }\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n","<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-button-only-icon]=\"onlyIcon\"\r\n  [class.x-button-activated]=\"activated\"\r\n  [class.x-button-disabled]=\"disabled\"\r\n  [class.x-button-round]=\"round\"\r\n  [class.x-button-circle]=\"circle\"\r\n  [class.x-button-icon]=\"icon && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable\"\r\n  [class.x-button-transition]=\"transition\"\r\n  [title]=\"title\"\r\n  x-ripple\r\n  [type]=\"type\"\r\n  [disabled]=\"disabled\"\r\n  [attr.type]=\"attrType\"\r\n>\r\n  @if (direction === 'row' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (loading) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction === 'row-reverse' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n</button>\r\n","import { NgModule } from '@angular/core';\r\nimport { XButtonComponent } from './button.component';\r\nimport { XButtonsComponent } from './buttons.component';\r\n\r\n@NgModule({\r\n  exports: [XButtonComponent, XButtonsComponent],\r\n  imports: [XButtonComponent, XButtonsComponent]\r\n})\r\nexport class XButtonModule {}\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-button.mjs","sources":["../../../../lib/ng-nest/ui/button/button.property.ts","../../../../lib/ng-nest/ui/button/buttons.component.ts","../../../../lib/ng-nest/ui/button/button.component.ts","../../../../lib/ng-nest/ui/button/button.component.html","../../../../lib/ng-nest/ui/button/button.module.ts","../../../../lib/ng-nest/ui/button/ng-nest-ui-button.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { XPropertyFunction, XToNumber, XToBoolean, XToCssPixelValue } from '@ng-nest/ui/core';\r\nimport type { XDirection, XSize, XNumber, XBoolean, XType } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Button\r\n * @selector x-button\r\n * @decorator component\r\n */\r\nexport const XButtonPrefix = 'x-button';\r\nconst X_BUTTON_CONFIG_NAME = 'button';\r\n\r\n/**\r\n * Button Property\r\n */\r\n@Component({ selector: `${XButtonPrefix}-property`, template: '' })\r\nexport class XButtonProperty extends XPropertyFunction(X_BUTTON_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 按钮类型\r\n   * @en_US Button type\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button>Initial</x-button>\r\n   * <x-button type=\"primary\">Primary</x-button>\r\n   * <x-button type=\"success\">Success</x-button>\r\n   * <x-button type=\"warning\">Warning</x-button>\r\n   * <x-button type=\"danger\">Danger</x-button>\r\n   * <x-button type=\"info\">Info</x-button>\r\n   * <x-button [type]=\"'primary'\">Primary</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly type = input<XButtonType>(this.config?.type ?? 'initial');\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button icon=\"fto-edit\"></x-button>\r\n   * <x-button icon=\"fto-edit\">Edit</x-button>\r\n   * <x-button [icon]=\"'fto-edit'\">Edit</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly icon = input<string>('');\r\n  /**\r\n   * @zh_CN 提示\r\n   * @en_US Title\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button title=\"information\"></x-button>\r\n   * <x-button [title]=\"'information'\"></x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly title = input<string>('');\r\n  /**\r\n   * @zh_CN 按钮中元素的布局方式\r\n   * @en_US Button elements in the layout\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button direction=\"column\" icon=\"edit\">Button</x-button>\r\n   * <x-button direction=\"column-reverse\" icon=\"edit\">Button</x-button>\r\n   * <x-button direction=\"row\" icon=\"edit\">Button</x-button>\r\n   * <x-button direction=\"row-reverse\" icon=\"edit\">Button</x-button>\r\n   * <x-button [direction]=\"row\" icon=\"edit\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly direction = input<XDirection>('row');\r\n  /**\r\n   * @zh_CN tab 键控制次序\r\n   * @en_US Tab key control order\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button tabindex=\"0\"></x-button>\r\n   * <x-button [tabindex]=\"0\"></x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly tabindex = input<number, XNumber>(0, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button size=\"big\">Big</x-button>\r\n   * <x-button size=\"large\">Large</x-button>\r\n   * <x-button size=\"medium\">Medium</x-button>\r\n   * <x-button size=\"small\">Small</x-button>\r\n   * <x-button size=\"mini\">Mini</x-button>\r\n   * <x-button [size]=\"'medium'\">Medium</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 仅显示图标\r\n   * @en_US Icon only\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button icon=\"fto-edit\" onlyIcon></x-button>\r\n   * <x-button icon=\"fto-edit\" onlyIcon=\"true\"></x-button>\r\n   * <x-button icon=\"fto-edit\" [onlyIcon]=\"true\"></x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly onlyIcon = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 激活的按钮（样式差异）\r\n   * @en_US Active button (style difference)\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button activated>Button</x-button>\r\n   * <x-button activated=\"true\">Button</x-button>\r\n   * <x-button [activated]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly activated = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 禁用按钮\r\n   * @en_US Disable button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button disabled>Button</x-button>\r\n   * <x-button disabled=\"true\">Button</x-button>\r\n   * <x-button [disabled]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly disabled = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 朴素按钮\r\n   * @en_US Plain button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button plain>Button</x-button>\r\n   * <x-button plain=\"true\">Button</x-button>\r\n   * <x-button [plain]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly plain = input<boolean, XBoolean>(this.config?.plain ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 平铺按钮\r\n   * @en_US Flat button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button flat>Button</x-button>\r\n   * <x-button flat=\"true\">Button</x-button>\r\n   * <x-button [flat]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly flat = input<boolean, XBoolean>(this.config?.flat ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 文字按钮\r\n   * @en_US Text button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button text>Button</x-button>\r\n   * <x-button text=\"true\">Button</x-button>\r\n   * <x-button [text]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly text = input<boolean, XBoolean>(this.config?.text ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 圆角按钮\r\n   * @en_US Round button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button round>Button</x-button>\r\n   * <x-button round=\"true\">Button</x-button>\r\n   * <x-button [round]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly round = input<boolean, XBoolean>(this.config?.round ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 圆型按钮（配合图标来使用）\r\n   * @en_US Round button (use with icon)\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button circle>Button</x-button>\r\n   * <x-button circle=\"true\">Button</x-button>\r\n   * <x-button [circle]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly circle = input<boolean, XBoolean>(this.config?.circle ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button loading>Button</x-button>\r\n   * <x-button loading=\"true\">Button</x-button>\r\n   * <x-button [loading]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly loading = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 关闭按钮\r\n   * @en_US Close button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button closable>Button</x-button>\r\n   * <x-button closable=\"true\">Button</x-button>\r\n   * <x-button [closable]=\"true\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly closable = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 按钮类型属性 submit, button, reset\r\n   * @en_US Button type attribute. submit, button, reset\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-button attrType=\"button\">Button</x-button>\r\n   * <x-button attrType=\"submit\">Button</x-button>\r\n   * <x-button attrType=\"reset\">Button</x-button>\r\n   * ```\r\n   *\r\n   */\r\n  readonly attrType = input<XButtonAttrType>(this.config?.attrType ?? 'button');\r\n}\r\n\r\n/**\r\n * @zh_CN 按钮类型\r\n * @en_US Button type\r\n */\r\nexport type XButtonType = XType;\r\n\r\n/**\r\n * @zh_CN 按钮类型属性\r\n * - `'submit'` : 此类型用于提交表单数据\r\n * - `'reset'` : 此类型用于重置表单中的数据\r\n * - `'button'` : 此类型用于自定义按钮行为\r\n * @en_US Button attr type\r\n * - `'submit'` : This type is used to submit the form data\r\n * - `'reset'` : This type is used to reset the form data\r\n * - `'button'` : This type is used to the custom button\r\n */\r\nexport type XButtonAttrType = 'submit' | 'button' | 'reset';\r\n\r\n/**\r\n * Buttons\r\n * @selector x-buttons\r\n * @decorator component\r\n */\r\nexport const XButtonsPrefix = 'x-buttons';\r\nconst X_BUTTONS_CONFIG_NAME = 'buttons';\r\n\r\n/**\r\n * Buttons Property\r\n */\r\n@Component({ selector: `${XButtonsPrefix}-property`, template: '' })\r\nexport class XButtonsProperty extends XPropertyFunction(X_BUTTONS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 按钮间距\r\n   * @en_US Button spacing\r\n   * @example\r\n   *\r\n   * ```html\r\n   * // ex: 10,'10px','1rem'\r\n   * <x-buttons space=\"1rem\">\r\n   *  <x-button>Button1</button>\r\n   *  <x-button>Button2</button>\r\n   * </x-buttons>\r\n   * ```\r\n   *\r\n   */\r\n  readonly space = input<string, XNumber>(this.config?.space ?? '', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 隐藏边框\r\n   * @en_US Hide border\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-buttons hiddenBorder>\r\n   *  <x-button>Button1</button>\r\n   *  <x-button>Button2</button>\r\n   * </x-buttons>\r\n   * ```\r\n   *\r\n   */\r\n  readonly hiddenBorder = input<boolean, XBoolean>(this.config?.hiddenBorder ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 显示阴影\r\n   * @en_US show box shadow\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-buttons boxShadow>\r\n   *  <x-button>Button1</button>\r\n   *  <x-button>Button2</button>\r\n   * </x-buttons>\r\n   * ```\r\n   *\r\n   */\r\n  readonly boxShadow = input<boolean, XBoolean>(this.config?.boxShadow ?? true, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 圆角按钮\r\n   * @en_US Round button\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-buttons round>\r\n   *  <x-button>Button1</button>\r\n   *  <x-button>Button2</button>\r\n   * </x-buttons>\r\n   * ```\r\n   *\r\n   */\r\n  readonly round = input<boolean, XBoolean>(this.config?.round ?? false, { transform: XToBoolean });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XButtonsPrefix, XButtonsProperty } from './button.property';\r\n\r\n@Component({\r\n  selector: `${XButtonsPrefix}`,\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrls: ['./buttons.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XButtonsComponent extends XButtonsProperty {\r\n  @HostBinding('class') className = XButtonsPrefix;\r\n  @HostBinding('class.x-buttons-space') get getSpace() {\r\n    return !!this.space();\r\n  }\r\n  @HostBinding('class.x-buttons-hiddenBorder') get getHiddenBorder() {\r\n    return this.hiddenBorder();\r\n  }\r\n  @HostBinding('class.x-buttons-box-shadow') get getBoxShadow() {\r\n    return this.boxShadow();\r\n  }\r\n  @HostBinding('class.x-buttons-round') get getRound() {\r\n    return this.round();\r\n  }\r\n  @HostBinding('style.marginLeft') get getMarginLeft() {\r\n    return '-' + this.space();\r\n  }\r\n  @HostBinding('style.marginRight') get getMarginRight() {\r\n    return '-' + this.space();\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  ElementRef,\r\n  inject,\r\n  AfterViewInit,\r\n  OnDestroy,\r\n  computed,\r\n  HostBinding,\r\n  signal,\r\n  afterRender,\r\n  viewChild\r\n} from '@angular/core';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XButtonPrefix, XButtonProperty } from './button.property';\r\nimport { XButtonsComponent } from './buttons.component';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XRippleDirective } from '@ng-nest/ui/ripple';\r\nimport { NgClass } from '@angular/common';\r\nimport { FocusMonitor } from '@angular/cdk/a11y';\r\n\r\n@Component({\r\n  selector: `${XButtonPrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, XIconComponent, XRippleDirective],\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XButtonComponent extends XButtonProperty implements AfterViewInit, OnDestroy {\r\n  buttonRef = viewChild.required('buttonRef', { read: ElementRef<HTMLElement> });\r\n  private buttons = inject(XButtonsComponent, { optional: true, host: true });\r\n  private focusMontitor = inject(FocusMonitor);\r\n  transition = signal(false);\r\n\r\n  @HostBinding('style.marginLeft') get marginLeft() {\r\n    return this.buttons?.space();\r\n  }\r\n  @HostBinding('style.marginRight') get marginRight() {\r\n    return this.buttons?.space();\r\n  }\r\n  @HostBinding('style.pointerEvents') get pointerEvents() {\r\n    return this.disabledComputed() ? 'none' : '';\r\n  }\r\n\r\n  constructor() {\r\n    super();\r\n    afterRender(() => {\r\n      this.transition.set(true);\r\n    });\r\n  }\r\n\r\n  classMap = computed(() => ({\r\n    [`${XButtonPrefix}-${this.type()}`]: !XIsEmpty(this.type()) && !this.plain(),\r\n    [`${XButtonPrefix}-${this.type()}-plain`]: !XIsEmpty(this.type()) && this.plain(),\r\n    [`${XButtonPrefix}-${this.type()}-text`]: !XIsEmpty(this.type()) && this.text(),\r\n    [`${XButtonPrefix}-${this.type()}-flat`]: !XIsEmpty(this.type()) && this.flat(),\r\n    [`x-size-${this.size()}`]: !XIsEmpty(this.size()),\r\n    [`x-direction-${this.direction()}`]: !XIsEmpty(this.direction())\r\n  }));\r\n\r\n  roundSignal = computed(() => {\r\n    return this.buttons?.round() || this.round();\r\n  });\r\n\r\n  disabledComputed = computed(() => {\r\n    return this.loading() || this.disabled();\r\n  });\r\n\r\n  ngAfterViewInit() {\r\n    this.focusMontitor.monitor(this.buttonRef(), true);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.focusMontitor.stopMonitoring(this.buttonRef());\r\n  }\r\n}\r\n","<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-button-only-icon]=\"onlyIcon()\"\r\n  [class.x-button-activated]=\"activated()\"\r\n  [class.x-button-disabled]=\"disabledComputed()\"\r\n  [class.x-button-round]=\"roundSignal()\"\r\n  [class.x-button-circle]=\"circle()\"\r\n  [class.x-button-icon]=\"icon() && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon() && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable()\"\r\n  [class.x-button-transition]=\"transition()\"\r\n  [title]=\"title()\"\r\n  x-ripple\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabledComputed()\"\r\n  [attr.type]=\"attrType()\"\r\n  [attr.disabled]=\"disabledComputed() || null\"\r\n>\r\n  @if (direction() === 'row' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (loading()) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction() === 'row-reverse' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n</button>\r\n","import { NgModule } from '@angular/core';\r\nimport { XButtonComponent } from './button.component';\r\nimport { XButtonsComponent } from './buttons.component';\r\n\r\n@NgModule({\r\n  exports: [XButtonComponent, XButtonsComponent],\r\n  imports: [XButtonComponent, XButtonsComponent]\r\n})\r\nexport class XButtonModule {}\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-calendar.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { XProperty, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';
+import { input, output, Component, inject, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { XPropertyFunction, XIsEmpty } from '@ng-nest/ui/core';
 import { DatePipe, LowerCasePipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { XI18nService, XI18nDirective } from '@ng-nest/ui/i18n';
+import { XI18nService, zh_CN, XI18nDirective } from '@ng-nest/ui/i18n';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XDatePickerComponent, XPickerDateComponent, XPickerMonthComponent } from '@ng-nest/ui/date-picker';
 import { XButtonComponent, XButtonsComponent } from '@ng-nest/ui/button';
 import { XRadioComponent } from '@ng-nest/ui/radio';
 import { XTooltipDirective } from '@ng-nest/ui/tooltip';
-import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Calendar
@@ -19,162 +19,188 @@ import { FormsModule } from '@angular/forms';
  * @decorator component
  */
 const XCalendarPrefix = 'x-calendar';
+const X_CALENDAR_CONFIG_NAME = 'calendar';
 /**
  * Calendar Property
  */
-class XCalendarProperty extends XProperty {
+class XCalendarProperty extends XPropertyFunction(X_CALENDAR_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 事务数据对象
+         * @en_US Transaction data object
+         * @example
+         *
+         * ```html
+         * <x-calendar [data]="{ '2020-2-22': [{id: '1',label: '1'}], '2020-2-24': [{id: '2, label: '2'}] }"></x-calendar>
+         * ```
+         *
+         */
+        this.data = input({});
         /**
          * @zh_CN 显示模式
          * @en_US Display mode
+         * @example
+         *
+         * ```html
+         * <x-calendar model="month"></x-calendar>
+         * <x-calendar model="year"></x-calendar>
+         * ```
+         *
          */
-        this.model = 'month';
+        this.model = input('month');
         /**
          * @zh_CN 显示类型
          * @en_US Display type
+         * @example
+         *
+         * ```html
+         * <x-calendar displayType="calendar"></x-calendar>
+         * <x-calendar displayType="card"></x-calendar>
+         * ```
+         *
+         */
+        this.displayType = input('calendar');
+        /**
+         * @zh_CN 头部显示模版
+         * @en_US Head display template
+         * @example
+         *
+         * ```html
+         * <x-calendar [headerLeftTemp]="headerLeftTemp"></x-calendar>
+         * <ng-template #headerLeftTemp> custom title </ng-template>
+         * ```
+         *
          */
-        this.displayType = 'calendar';
+        this.headerLeftTemp = input();
         /**
          * @zh_CN 选择日期变化的事件
          * @en_US Select the event of the date change
+         * @example
+         *
+         * ```html
+         * <x-calendar (dateChange)="onDateChange($event)"></x-calendar>
+         * ```
+         *
+         * ```typescript
+         * ...
+         * onDateChange(date: Date) {
+         *   console.log(date)
+         * }
+         * ...
+         * ```
+         *
          */
-        this.dateChange = new EventEmitter();
+        this.dateChange = output();
         /**
          * @zh_CN 日期范围变化的事件
          * @en_US Date range change event
+         * @example
+         *
+         * ```html
+         * <x-calendar (rangeChange)="onRangeChange($event)"></x-calendar>
+         * ```
+         *
+         * ```typescript
+         * ...
+         * onRangeChange(dates: Date[]) {
+         *   console.log(dates)
+         * }
+         * ...
+         * ```
+         *
          */
-        this.rangeChange = new EventEmitter();
+        this.rangeChange = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XCalendarProperty, selector: "x-calendar-property", inputs: { data: "data", model: "model", displayType: "displayType", headerLeftTemp: "headerLeftTemp" }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XCalendarProperty, selector: "x-calendar-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, headerLeftTemp: { classPropertyName: "headerLeftTemp", publicName: "headerLeftTemp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCalendarPrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], displayType: [{
-                type: Input
-            }], headerLeftTemp: [{
-                type: Input
-            }], dateChange: [{
-                type: Output
-            }], rangeChange: [{
-                type: Output
-            }] } });
+        }] });
 
 class XCalendarComponent extends XCalendarProperty {
     constructor() {
         super(...arguments);
-        this.now = new Date();
-        this.datetime = new Date();
-        this.activatedDate = new Date();
-        this.monthData = {};
-        this.locale = {};
-        this.radioData = [
-            { label: '月', id: 'month' },
-            { label: '年', id: 'year' }
-        ];
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
         this.datePipe = inject(DatePipe);
         this.lowerCasePipe = inject(LowerCasePipe);
         this.i18n = inject(XI18nService);
-        this.configService = inject(XConfigService);
-    }
-    ngOnInit() {
-        this.i18n.localeChange
-            .pipe(map((x) => x.calendar), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.setLocal();
-            this.cdr.markForCheck();
+        this.datetime = signal(new Date());
+        this.activatedDate = signal(new Date());
+        this.radioDataBase = [
+            { label: '', id: 'month' },
+            { label: '', id: 'year' }
+        ];
+        this.modelSignal = signal(this.model());
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.calendar)), {
+            initialValue: zh_CN.calendar
+        });
+        this.radioData = computed(() => {
+            return this.radioDataBase.map((x) => {
+                x.label = this.locale()[x.id];
+                return x;
+            });
+        });
+        this.classMap = computed(() => ({
+            [`${XCalendarPrefix}-${this.displayType()}`]: !XIsEmpty(this.displayType())
+        }));
+        this.monthData = computed(() => {
+            let dt = {};
+            for (let key in this.data()) {
+                let month = this.datePipe.transform(key, 'yyyy-MM');
+                let value = '';
+                this.data()[key].forEach((x) => {
+                    value += `${x.id}${x.label} <br/>`;
+                });
+                let item = { id: key, label: value };
+                if (dt[month]) {
+                    dt[month] = [...dt[month], item];
+                }
+                else {
+                    dt[month] = [item];
+                }
+            }
+            return dt;
         });
-        this.setClassMap();
-    }
-    ngOnChanges(changes) {
-        const { data } = changes;
-        XIsChange(data) && this.setMonthData();
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    setClassMap() {
-        this.classMap[`${XCalendarPrefix}-${this.displayType}`] = !XIsEmpty(this.displayType);
     }
     action(next) {
-        let datetime = new Date(this.datetime.getTime());
-        if (this.model === 'month') {
+        let datetime = new Date(this.datetime().getTime());
+        if (this.modelSignal() === 'month') {
             datetime.setMonth(datetime.getMonth() + next);
         }
-        else if (this.model === 'year') {
+        else if (this.modelSignal() === 'year') {
             datetime.setFullYear(datetime.getFullYear() + next);
         }
-        this.datetime = datetime;
-        this.cdr.markForCheck();
-    }
-    setLocal() {
-        this.radioData = this.radioData.map((x) => {
-            x.label = this.locale[x.id];
-            return x;
-        });
-    }
-    setMonthData() {
-        let dt = {};
-        for (let key in this.data) {
-            let month = this.datePipe.transform(key, 'yyyy-MM');
-            let value = '';
-            this.data[key].forEach((x) => {
-                value += `${x.id}${x.label} <br/>`;
-            });
-            let item = { id: key, label: value };
-            if (dt[month]) {
-                dt[month] = [...dt[month], item];
-            }
-            else {
-                dt[month] = [item];
-            }
-        }
-        this.monthData = dt;
+        this.datetime.set(datetime);
     }
     getLocaleMonth(date) {
-        return this.locale[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
+        return this.locale()[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL'))];
     }
     dateOnChange(date) {
-        if (this.datePipe.transform(date, 'yyyy-MM-dd') !== this.datePipe.transform(this.activatedDate, 'yyyy-MM-dd')) {
-            this.activatedDate = date;
-            this.dateChange.emit(this.activatedDate);
-            this.cdr.markForCheck();
+        if (this.datePipe.transform(date, 'yyyy-MM-dd') !== this.datePipe.transform(this.activatedDate(), 'yyyy-MM-dd')) {
+            this.activatedDate.set(date);
+            this.dateChange.emit(this.activatedDate());
         }
     }
-    modelOnChange() {
-        this.cdr.detectChanges();
-    }
     rangeOnChange(range) {
         this.rangeChange.emit(range);
     }
     getDate(date) {
         if (this.data) {
-            return this.data[this.datePipe.transform(date, 'yyyy-MM-dd')];
+            return this.data()?.[this.datePipe.transform(date, 'yyyy-MM-dd')];
         }
         else {
             return [];
         }
     }
     getMonth(date) {
-        return this.monthData?.[this.datePipe.transform(date, 'yyyy-MM')];
-    }
-    trackByMonth(_index, item) {
-        return item.id;
+        return this.monthData()?.[this.datePipe.transform(date, 'yyyy-MM')];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XCalendarComponent, isStandalone: true, selector: "x-calendar", providers: [DatePipe, LowerCasePipe], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #calendar class=\"x-calendar\" [ngClass]=\"classMap\">\r\n  <div class=\"x-calendar-header\">\r\n    <div class=\"x-calendar-header-left\">\r\n      @if (headerLeftTemp) {\r\n        <ng-container *ngTemplateOutlet=\"headerLeftTemp\"></ng-container>\r\n      }\r\n    </div>\r\n    <div class=\"x-calendar-header-right\">\r\n      <x-date-picker [(ngModel)]=\"datetime\" [type]=\"model\" showHeader=\"false\" [clearable]=\"false\"></x-date-picker>\r\n      <x-buttons>\r\n        <x-button (click)=\"action(-1)\">{{ model === 'month' ? locale.lastMonth : locale.lastYear }}</x-button>\r\n        <x-button (click)=\"action(1)\">{{ model === 'month' ? locale.nextMonth : locale.nextYear }}</x-button>\r\n      </x-buttons>\r\n      <x-radio [data]=\"radioData\" [(ngModel)]=\"model\" (ngModelChange)=\"modelOnChange()\" button></x-radio>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-calendar-body\">\r\n    @if (model === 'month') {\r\n      <x-picker-date\r\n        [display]=\"datetime\"\r\n        (modelChange)=\"dateOnChange($event)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [dateTemp]=\"dateTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-date>\r\n    }\r\n    @if (model === 'year') {\r\n      <x-picker-month\r\n        [display]=\"datetime\"\r\n        (modelChange)=\"dateOnChange($event)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [monthTemp]=\"monthTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-month>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dateTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-date\" [class.x-activated]=\"(date | date: 'yyyyMMdd') === (activatedDate | date: 'yyyyMMdd')\">\r\n    <span [title]=\"date | date: 'yyyy-MM-dd'\">{{ date | date: 'd' }}</span>\r\n    @if (displayType === 'calendar') {\r\n      <div class=\"x-calendar-date-content\">\r\n        @if (getDate(date)) {\r\n          <ul>\r\n            @for (item of getDate(date); track item.id + item.label) {\r\n              <li>\r\n                <span [title]=\"item.id + item.label\">{{ item.id }}{{ item.label }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #monthTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-month\" [class.x-activated]=\"(date | date: 'yyyyMM') === (activatedDate | date: 'yyyyMM')\">\r\n    <span [title]=\"date | date: 'yyyy-MM'\">{{ getLocaleMonth(date) }}</span>\r\n    @if (displayType === 'calendar') {\r\n      <div class=\"x-calendar-month-content\">\r\n        @if (getMonth(date)) {\r\n          <ul>\r\n            @for (item of getMonth(date); track item.id) {\r\n              <li>\r\n                <x-link x-tooltip [content]=\"item.label\" placement=\"top\">{{ item.id }}</x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["x-calendar{display:inline-block}.x-calendar{margin:0;padding:0;box-sizing:border-box}.x-calendar-header{display:flex;align-items:center;justify-content:space-between}.x-calendar-header-right{display:flex;align-items:center;justify-content:flex-end}.x-calendar-header-right>x-date-picker{display:inline-block;width:6rem}.x-calendar-header-right>x-buttons,.x-calendar-header-right>x-radio{margin-left:.5rem}.x-calendar-body>x-picker-date .x-picker-date tr,.x-calendar-body>x-picker-month .x-picker-month tr{display:flex}.x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-body>x-picker-month .x-picker-month tr th{padding:.325rem;margin:0 .25rem;display:inline-block;flex:1;overflow:hidden}.x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-body>x-picker-month .x-picker-month tr td{padding:0;cursor:pointer;position:relative;flex:1;overflow:hidden;margin:0 .25rem;transition:.3s}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{display:block}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{padding-left:.325rem;position:static;width:auto;overflow-y:auto}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content li{margin:0;padding:0;list-style:none}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li{line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;position:relative}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-calendar-calendar{margin:.25rem -.25rem 0}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr th{height:2.25rem;line-height:2.25rem;text-align:right}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td{height:6.75rem;border-top:.125rem solid var(--x-border);text-align:left}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{text-align:right;padding:.325rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{height:4.5rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary-900)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-400)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now{color:var(--x-primary);border-top-color:var(--x-primary)}.x-calendar-card{border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-calendar-card .x-calendar-header{padding:.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td{margin:.25rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);border-color:transparent}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{padding:.125rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary);color:var(--x-background-100)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200);color:var(--x-primary)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-700)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-month:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-month:not(.x-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XTooltipDirective, selector: "[x-tooltip], x-tooltip" }, { kind: "component", type: XRadioComponent, selector: "x-radio" }, { kind: "component", type: XDatePickerComponent, selector: "x-date-picker" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XCalendarComponent, isStandalone: true, selector: "x-calendar", providers: [DatePipe, LowerCasePipe], usesInheritance: true, ngImport: i0, template: "<div #calendar class=\"x-calendar\" [ngClass]=\"classMap()\">\r\n  <div class=\"x-calendar-header\">\r\n    <div class=\"x-calendar-header-left\">\r\n      @if (headerLeftTemp()) {\r\n        <ng-container *ngTemplateOutlet=\"headerLeftTemp()!\"></ng-container>\r\n      }\r\n    </div>\r\n    <div class=\"x-calendar-header-right\">\r\n      <x-date-picker\r\n        [(ngModel)]=\"datetime\"\r\n        [type]=\"modelSignal()\"\r\n        showHeader=\"false\"\r\n        [clearable]=\"false\"\r\n      ></x-date-picker>\r\n      <x-buttons [boxShadow]=\"false\">\r\n        <x-button (click)=\"action(-1)\" plain>{{\r\n          modelSignal() === 'month' ? locale().lastMonth : locale().lastYear\r\n        }}</x-button>\r\n        <x-button (click)=\"action(1)\" plain>{{\r\n          modelSignal() === 'month' ? locale().nextMonth : locale().nextYear\r\n        }}</x-button>\r\n      </x-buttons>\r\n      <x-radio [data]=\"radioData()\" [(ngModel)]=\"modelSignal\" button></x-radio>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-calendar-body\">\r\n    @if (modelSignal() === 'month') {\r\n      <x-picker-date\r\n        [display]=\"datetime()\"\r\n        (modelChange)=\"dateOnChange($event!)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [dateTemp]=\"dateTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-date>\r\n    }\r\n    @if (modelSignal() === 'year') {\r\n      <x-picker-month\r\n        [display]=\"datetime()\"\r\n        (modelChange)=\"dateOnChange($event!)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [monthTemp]=\"monthTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-month>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dateTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-date\" [class.x-activated]=\"(date | date: 'yyyyMMdd') === (activatedDate() | date: 'yyyyMMdd')\">\r\n    <span [title]=\"date | date: 'yyyy-MM-dd'\">{{ date | date: 'd' }}</span>\r\n    @if (displayType() === 'calendar') {\r\n      <div class=\"x-calendar-date-content\">\r\n        @if (getDate(date)) {\r\n          <ul>\r\n            @for (item of getDate(date); track item.id + item.label) {\r\n              <li>\r\n                <span [title]=\"item.id + item.label\">{{ item.id }}{{ item.label }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #monthTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-month\" [class.x-activated]=\"(date | date: 'yyyyMM') === (activatedDate() | date: 'yyyyMM')\">\r\n    <span [title]=\"date | date: 'yyyy-MM'\">{{ getLocaleMonth(date) }}</span>\r\n    @if (displayType() === 'calendar') {\r\n      <div class=\"x-calendar-month-content\">\r\n        @if (getMonth(date)) {\r\n          <ul>\r\n            @for (item of getMonth(date); track item.id) {\r\n              <li>\r\n                <x-link x-tooltip [content]=\"item.label\" placement=\"top\">{{ item.id }}</x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["x-calendar{display:inline-block}.x-calendar{margin:0;padding:0;box-sizing:border-box}.x-calendar-header{display:flex;align-items:center;justify-content:space-between}.x-calendar-header-right{display:flex;align-items:center;justify-content:flex-end}.x-calendar-header-right>x-date-picker{display:inline-block;width:8rem}.x-calendar-header-right>x-buttons,.x-calendar-header-right>x-radio{margin-left:.5rem}.x-calendar-body>x-picker-date .x-picker-date tr,.x-calendar-body>x-picker-month .x-picker-month tr{display:flex}.x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-body>x-picker-month .x-picker-month tr th{padding:.325rem;margin:0 .25rem;display:inline-block;flex:1;overflow:hidden}.x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-body>x-picker-month .x-picker-month tr td{padding:0;cursor:pointer;position:relative;flex:1;overflow:hidden;margin:0 .25rem;transition:.3s}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{display:block}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{padding-left:.325rem;position:static;width:auto;overflow-y:auto}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content li{margin:0;padding:0;list-style:none}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li{line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;position:relative}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-calendar-calendar{margin:.25rem -.25rem 0}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr th{height:2.25rem;line-height:2.25rem;text-align:right}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td{height:6.75rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{text-align:right;padding:.325rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{height:4.5rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary-900)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-400)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now{color:var(--x-primary);border-top-color:var(--x-primary)}.x-calendar-calendar .x-calendar-body .x-picker-date-body>table td:first-child,.x-calendar-calendar .x-calendar-body .x-picker-date-body>table td:last-child{border-radius:0}.x-calendar-card{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-calendar-card .x-calendar-header{padding:.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);justify-content:center}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td{margin:.25rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:transparent}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{padding:.125rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary);color:var(--x-background-100)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200);color:var(--x-primary)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-700)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-month:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-month:not(.x-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XTooltipDirective, selector: "[x-tooltip], x-tooltip" }, { kind: "component", type: XRadioComponent, selector: "x-radio" }, { kind: "component", type: XDatePickerComponent, selector: "x-date-picker" }, { kind: "component", type: XPickerDateComponent, selector: "x-picker-date" }, { kind: "component", type: XPickerMonthComponent, selector: "x-picker-month" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCalendarPrefix}`, standalone: true, imports: [
                         NgClass,
@@ -190,15 +216,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XButtonComponent,
                         XButtonsComponent,
                         XI18nDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatePipe, LowerCasePipe], template: "<div #calendar class=\"x-calendar\" [ngClass]=\"classMap\">\r\n  <div class=\"x-calendar-header\">\r\n    <div class=\"x-calendar-header-left\">\r\n      @if (headerLeftTemp) {\r\n        <ng-container *ngTemplateOutlet=\"headerLeftTemp\"></ng-container>\r\n      }\r\n    </div>\r\n    <div class=\"x-calendar-header-right\">\r\n      <x-date-picker [(ngModel)]=\"datetime\" [type]=\"model\" showHeader=\"false\" [clearable]=\"false\"></x-date-picker>\r\n      <x-buttons>\r\n        <x-button (click)=\"action(-1)\">{{ model === 'month' ? locale.lastMonth : locale.lastYear }}</x-button>\r\n        <x-button (click)=\"action(1)\">{{ model === 'month' ? locale.nextMonth : locale.nextYear }}</x-button>\r\n      </x-buttons>\r\n      <x-radio [data]=\"radioData\" [(ngModel)]=\"model\" (ngModelChange)=\"modelOnChange()\" button></x-radio>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-calendar-body\">\r\n    @if (model === 'month') {\r\n      <x-picker-date\r\n        [display]=\"datetime\"\r\n        (modelChange)=\"dateOnChange($event)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [dateTemp]=\"dateTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-date>\r\n    }\r\n    @if (model === 'year') {\r\n      <x-picker-month\r\n        [display]=\"datetime\"\r\n        (modelChange)=\"dateOnChange($event)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [monthTemp]=\"monthTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-month>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dateTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-date\" [class.x-activated]=\"(date | date: 'yyyyMMdd') === (activatedDate | date: 'yyyyMMdd')\">\r\n    <span [title]=\"date | date: 'yyyy-MM-dd'\">{{ date | date: 'd' }}</span>\r\n    @if (displayType === 'calendar') {\r\n      <div class=\"x-calendar-date-content\">\r\n        @if (getDate(date)) {\r\n          <ul>\r\n            @for (item of getDate(date); track item.id + item.label) {\r\n              <li>\r\n                <span [title]=\"item.id + item.label\">{{ item.id }}{{ item.label }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #monthTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-month\" [class.x-activated]=\"(date | date: 'yyyyMM') === (activatedDate | date: 'yyyyMM')\">\r\n    <span [title]=\"date | date: 'yyyy-MM'\">{{ getLocaleMonth(date) }}</span>\r\n    @if (displayType === 'calendar') {\r\n      <div class=\"x-calendar-month-content\">\r\n        @if (getMonth(date)) {\r\n          <ul>\r\n            @for (item of getMonth(date); track item.id) {\r\n              <li>\r\n                <x-link x-tooltip [content]=\"item.label\" placement=\"top\">{{ item.id }}</x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["x-calendar{display:inline-block}.x-calendar{margin:0;padding:0;box-sizing:border-box}.x-calendar-header{display:flex;align-items:center;justify-content:space-between}.x-calendar-header-right{display:flex;align-items:center;justify-content:flex-end}.x-calendar-header-right>x-date-picker{display:inline-block;width:6rem}.x-calendar-header-right>x-buttons,.x-calendar-header-right>x-radio{margin-left:.5rem}.x-calendar-body>x-picker-date .x-picker-date tr,.x-calendar-body>x-picker-month .x-picker-month tr{display:flex}.x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-body>x-picker-month .x-picker-month tr th{padding:.325rem;margin:0 .25rem;display:inline-block;flex:1;overflow:hidden}.x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-body>x-picker-month .x-picker-month tr td{padding:0;cursor:pointer;position:relative;flex:1;overflow:hidden;margin:0 .25rem;transition:.3s}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{display:block}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{padding-left:.325rem;position:static;width:auto;overflow-y:auto}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content li{margin:0;padding:0;list-style:none}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li{line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;position:relative}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-calendar-calendar{margin:.25rem -.25rem 0}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr th{height:2.25rem;line-height:2.25rem;text-align:right}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td{height:6.75rem;border-top:.125rem solid var(--x-border);text-align:left}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{text-align:right;padding:.325rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{height:4.5rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary-900)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-400)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now{color:var(--x-primary);border-top-color:var(--x-primary)}.x-calendar-card{border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-calendar-card .x-calendar-header{padding:.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td{margin:.25rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);border-color:transparent}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{padding:.125rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary);color:var(--x-background-100)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200);color:var(--x-primary)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-700)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-month:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-month:not(.x-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatePipe, LowerCasePipe], template: "<div #calendar class=\"x-calendar\" [ngClass]=\"classMap()\">\r\n  <div class=\"x-calendar-header\">\r\n    <div class=\"x-calendar-header-left\">\r\n      @if (headerLeftTemp()) {\r\n        <ng-container *ngTemplateOutlet=\"headerLeftTemp()!\"></ng-container>\r\n      }\r\n    </div>\r\n    <div class=\"x-calendar-header-right\">\r\n      <x-date-picker\r\n        [(ngModel)]=\"datetime\"\r\n        [type]=\"modelSignal()\"\r\n        showHeader=\"false\"\r\n        [clearable]=\"false\"\r\n      ></x-date-picker>\r\n      <x-buttons [boxShadow]=\"false\">\r\n        <x-button (click)=\"action(-1)\" plain>{{\r\n          modelSignal() === 'month' ? locale().lastMonth : locale().lastYear\r\n        }}</x-button>\r\n        <x-button (click)=\"action(1)\" plain>{{\r\n          modelSignal() === 'month' ? locale().nextMonth : locale().nextYear\r\n        }}</x-button>\r\n      </x-buttons>\r\n      <x-radio [data]=\"radioData()\" [(ngModel)]=\"modelSignal\" button></x-radio>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-calendar-body\">\r\n    @if (modelSignal() === 'month') {\r\n      <x-picker-date\r\n        [display]=\"datetime()\"\r\n        (modelChange)=\"dateOnChange($event!)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [dateTemp]=\"dateTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-date>\r\n    }\r\n    @if (modelSignal() === 'year') {\r\n      <x-picker-month\r\n        [display]=\"datetime()\"\r\n        (modelChange)=\"dateOnChange($event!)\"\r\n        (rangeChange)=\"rangeOnChange($event)\"\r\n        [monthTemp]=\"monthTemp\"\r\n        showHeader=\"false\"\r\n      ></x-picker-month>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dateTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-date\" [class.x-activated]=\"(date | date: 'yyyyMMdd') === (activatedDate() | date: 'yyyyMMdd')\">\r\n    <span [title]=\"date | date: 'yyyy-MM-dd'\">{{ date | date: 'd' }}</span>\r\n    @if (displayType() === 'calendar') {\r\n      <div class=\"x-calendar-date-content\">\r\n        @if (getDate(date)) {\r\n          <ul>\r\n            @for (item of getDate(date); track item.id + item.label) {\r\n              <li>\r\n                <span [title]=\"item.id + item.label\">{{ item.id }}{{ item.label }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #monthTemp let-date=\"date$\">\r\n  <div class=\"x-calendar-month\" [class.x-activated]=\"(date | date: 'yyyyMM') === (activatedDate() | date: 'yyyyMM')\">\r\n    <span [title]=\"date | date: 'yyyy-MM'\">{{ getLocaleMonth(date) }}</span>\r\n    @if (displayType() === 'calendar') {\r\n      <div class=\"x-calendar-month-content\">\r\n        @if (getMonth(date)) {\r\n          <ul>\r\n            @for (item of getMonth(date); track item.id) {\r\n              <li>\r\n                <x-link x-tooltip [content]=\"item.label\" placement=\"top\">{{ item.id }}</x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["x-calendar{display:inline-block}.x-calendar{margin:0;padding:0;box-sizing:border-box}.x-calendar-header{display:flex;align-items:center;justify-content:space-between}.x-calendar-header-right{display:flex;align-items:center;justify-content:flex-end}.x-calendar-header-right>x-date-picker{display:inline-block;width:8rem}.x-calendar-header-right>x-buttons,.x-calendar-header-right>x-radio{margin-left:.5rem}.x-calendar-body>x-picker-date .x-picker-date tr,.x-calendar-body>x-picker-month .x-picker-month tr{display:flex}.x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-body>x-picker-month .x-picker-month tr th{padding:.325rem;margin:0 .25rem;display:inline-block;flex:1;overflow:hidden}.x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-body>x-picker-month .x-picker-month tr td{padding:0;cursor:pointer;position:relative;flex:1;overflow:hidden;margin:0 .25rem;transition:.3s}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{display:block}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{padding-left:.325rem;position:static;width:auto;overflow-y:auto}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content ul,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content li{margin:0;padding:0;list-style:none}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li{line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;position:relative}.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content>ul li>span,.x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content>ul li>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-calendar-calendar{margin:.25rem -.25rem 0}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr th,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr th{height:2.25rem;line-height:2.25rem;text-align:right}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td{height:6.75rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{text-align:right;padding:.325rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date-content,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month-content{height:4.5rem}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary-900)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-400)}.x-calendar-calendar .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now,.x-calendar-calendar .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now{color:var(--x-primary);border-top-color:var(--x-primary)}.x-calendar-calendar .x-calendar-body .x-picker-date-body>table td:first-child,.x-calendar-calendar .x-calendar-body .x-picker-date-body>table td:last-child{border-radius:0}.x-calendar-card{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-calendar-card .x-calendar-header{padding:.5rem;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);justify-content:center}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td{margin:.25rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:transparent}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date>span,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month>span{padding:.125rem}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td .x-calendar-month.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-date.x-activated,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td .x-calendar-month.x-activated{background-color:var(--x-primary);color:var(--x-background-100)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td:hover,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td:hover{background-color:var(--x-background-a200);color:var(--x-primary)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-last-or-next,.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-last-or-next{color:var(--x-text-700)}.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-date .x-picker-date tr td.x-date-now .x-calendar-month:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-date:not(.x-activated),.x-calendar-card .x-calendar-body>x-picker-month .x-picker-month tr td.x-date-now .x-calendar-month:not(.x-activated){color:var(--x-primary);background-color:transparent;border-color:var(--x-primary)}\n"] }]
         }] });
 
 class XCalendarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XCalendarModule, imports: [XCalendarComponent], exports: [XCalendarComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarModule, imports: [XCalendarComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XCalendarModule, imports: [XCalendarComponent], exports: [XCalendarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarModule, imports: [XCalendarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCalendarComponent],