ngx-kit 7.1.0 → 7.2.0

package/fesm2022/ngx-kit-drawer-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-drawer-menu.mjs","sources":["../../../projects/libs/drawer-menu/contracts/drawer-menu-types.ts","../../../projects/libs/drawer-menu/components/drawer-menu.component.ts","../../../projects/libs/drawer-menu/components/drawer-menu.component.html","../../../projects/libs/drawer-menu/ngx-kit-drawer-menu.ts"],"sourcesContent":["/** Logical drawer placement. `start` is right in RTL and left in LTR. */\r\nexport type NgxDrawerSide = 'start' | 'end';\r\n\r\n/** Visual physics used by the drawer while opening/closing. */\r\nexport type NgxDrawerEffect =\r\n  | 'none'\r\n  | 'fabric'\r\n  | 'slide'\r\n  | 'push'\r\n  | 'scale';\r\n\r\nexport type NgxDrawerBehavior =\r\n  | 'dock'\r\n  | 'overlay';\r\n\r\nexport type NgxDrawerResponsiveMode =\r\n  | 'auto'\r\n  | 'desktop'\r\n  | 'mobile';\r\n\r\nexport interface NgxDrawerResponsive {\r\n  /**\r\n   * auto:\r\n   *   breakpoint determines desktop/mobile mode\r\n   *\r\n   * desktop:\r\n   *   always desktop\r\n   *\r\n   * mobile:\r\n   *   always mobile\r\n   */\r\n  mode?: NgxDrawerResponsiveMode;\r\n\r\n  /**\r\n   * Width at which the drawer switches\r\n   * between desktop and mobile.\r\n   */\r\n  breakpoint?: number;\r\n\r\n  /**\r\n   * Initial/default state on desktop.\r\n   */\r\n  desktopOpen?: boolean;\r\n\r\n  /**\r\n   * Initial/default state on mobile.\r\n   */\r\n  mobileOpen?: boolean;\r\n\r\n  /**\r\n   * Desktop drawer behavior.\r\n   */\r\n  desktopBehavior?: NgxDrawerBehavior;\r\n\r\n  /**\r\n   * Mobile drawer behavior.\r\n   */\r\n  mobileBehavior?: NgxDrawerBehavior;\r\n\r\n  /**\r\n   * If true, pinned state is preserved\r\n   * when switching between desktop/mobile.\r\n   */\r\n  respectPinned?: boolean;\r\n}\r\n\r\nexport const DEFAULT_DRAWER_RESPONSIVE: Required<NgxDrawerResponsive> = {\r\n  mode: 'auto',\r\n  breakpoint: 960,\r\n  desktopOpen: true,\r\n  mobileOpen: false,\r\n  desktopBehavior: 'dock',\r\n  mobileBehavior: 'overlay',\r\n  respectPinned: true,\r\n};","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  HostBinding,\r\n  PLATFORM_ID,\r\n  Renderer2,\r\n  afterNextRender,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n} from '@angular/core';\r\n\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport {\r\n  DEFAULT_DRAWER_RESPONSIVE,\r\n  NgxDrawerBehavior,\r\n  NgxDrawerEffect,\r\n  NgxDrawerResponsive,\r\n  NgxDrawerSide,\r\n} from '../contracts/drawer-menu-types';\r\n\r\n@Component({\r\n  selector: 'ngx-drawer-menu',\r\n  standalone: true,\r\n  templateUrl: './drawer-menu.component.html',\r\n  styleUrl: './drawer-menu.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxDrawerMenuComponent {\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly platformId = inject(PLATFORM_ID);\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Inputs\r\n  // ---------------------------------------------------------------------------\r\n\r\n  readonly side = input<NgxDrawerSide>('start');\r\n\r\n  readonly effect = input<NgxDrawerEffect>('fabric');\r\n\r\n  readonly width = input<number | string>(300);\r\n\r\n  /**\r\n   * Main drawer state.\r\n   *\r\n   * Usage:\r\n   *\r\n   * [(open)]=\"sidebarOpen\"\r\n   */\r\n  readonly open = model<boolean>(false);\r\n\r\n  /**\r\n   * Pinned state.\r\n   *\r\n   * Useful for desktop layouts.\r\n   *\r\n   * [(pinned)]=\"sidebarPinned\"\r\n   */\r\n  readonly pinned = model<boolean>(false);\r\n\r\n  readonly responsive = input<NgxDrawerResponsive>(DEFAULT_DRAWER_RESPONSIVE);\r\n\r\n  /**\r\n   * Whether clicking backdrop closes drawer.\r\n   */\r\n  readonly closeOnBackdrop = input(true);\r\n\r\n  /**\r\n   * Whether Escape closes drawer.\r\n   */\r\n  readonly closeOnEscape = input(true);\r\n\r\n  /**\r\n   * Whether body scrolling should be locked\r\n   * while an overlay drawer is open.\r\n   */\r\n  readonly lockBodyScroll = input(true);\r\n\r\n  /**\r\n   * Animation duration in milliseconds.\r\n   */\r\n  readonly animationDuration = input(280);\r\n\r\n  /**\r\n   * z-index.\r\n   */\r\n  readonly zIndex = input(1000);\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Internal state\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private readonly isBrowser = isPlatformBrowser(this.platformId);\r\n\r\n  readonly isMobile = signal(false);\r\n\r\n  readonly initialized = signal(false);\r\n\r\n  /**\r\n   * Used to avoid applying responsive defaults repeatedly.\r\n   */\r\n  private previousResponsiveMode: 'desktop' | 'mobile' | null = null;\r\n\r\n  private mediaQuery?: MediaQueryList;\r\n\r\n  private removeMediaQueryListener?: () => void;\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Computed\r\n  // ---------------------------------------------------------------------------\r\n\r\n  readonly responsiveConfig = computed(() => {\r\n    const config = this.responsive();\r\n\r\n    return {\r\n      ...DEFAULT_DRAWER_RESPONSIVE,\r\n      ...config,\r\n    };\r\n  });\r\n\r\n  readonly currentMode = computed<'desktop' | 'mobile'>(() => {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.mode === 'desktop') {\r\n      return 'desktop';\r\n    }\r\n\r\n    if (config.mode === 'mobile') {\r\n      return 'mobile';\r\n    }\r\n\r\n    return this.isMobile() ? 'mobile' : 'desktop';\r\n  });\r\n\r\n  readonly currentBehavior = computed<NgxDrawerBehavior>(() => {\r\n    const config = this.responsiveConfig();\r\n\r\n    return this.currentMode() === 'mobile' ? config.mobileBehavior : config.desktopBehavior;\r\n  });\r\n\r\n  readonly isOverlay = computed(() => {\r\n    return this.currentBehavior() === 'overlay';\r\n  });\r\n\r\n  readonly isDocked = computed(() => {\r\n    return this.currentBehavior() === 'dock';\r\n  });\r\n\r\n  readonly shouldShowBackdrop = computed(() => {\r\n    return this.isOverlay() && this.open();\r\n  });\r\n\r\n  readonly drawerWidth = computed(() => {\r\n    const width = this.width();\r\n\r\n    if (typeof width === 'number') {\r\n      return `${width}px`;\r\n    }\r\n\r\n    return width;\r\n  });\r\n\r\n  readonly drawerVisible = computed(() => {\r\n    return this.open();\r\n  });\r\n\r\n  readonly shouldPreservePinned = computed(() => {\r\n    return this.responsiveConfig().respectPinned;\r\n  });\r\n\r\n  readonly isPinnedAndDesktop = computed(() => {\r\n    return this.currentMode() === 'desktop' && this.pinned() && this.shouldPreservePinned();\r\n  });\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Host bindings\r\n  // ---------------------------------------------------------------------------\r\n\r\n  @HostBinding('class.drawer-start')\r\n  get drawerStart(): boolean {\r\n    return this.side() === 'start';\r\n  }\r\n\r\n  @HostBinding('class.drawer-end')\r\n  get drawerEnd(): boolean {\r\n    return this.side() === 'end';\r\n  }\r\n\r\n  @HostBinding('class.drawer-open')\r\n  get drawerOpen(): boolean {\r\n    return this.open();\r\n  }\r\n\r\n  @HostBinding('class.drawer-mobile')\r\n  get drawerMobile(): boolean {\r\n    return this.currentMode() === 'mobile';\r\n  }\r\n\r\n  @HostBinding('class.drawer-desktop')\r\n  get drawerDesktop(): boolean {\r\n    return this.currentMode() === 'desktop';\r\n  }\r\n\r\n  @HostBinding('class.drawer-overlay')\r\n  get drawerOverlay(): boolean {\r\n    return this.isOverlay();\r\n  }\r\n\r\n  @HostBinding('class.drawer-dock')\r\n  get drawerDock(): boolean {\r\n    return this.isDocked();\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-width')\r\n  get hostWidth(): string {\r\n    return this.drawerWidth();\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-duration')\r\n  get hostDuration(): string {\r\n    return `${this.animationDuration()}ms`;\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-z-index')\r\n  get hostZIndex(): number {\r\n    return this.zIndex();\r\n  }\r\n\r\n  @HostBinding('class.effect-none')\r\n  get effectNone(): boolean {\r\n    return this.effect() === 'none';\r\n  }\r\n\r\n  @HostBinding('class.effect-fabric')\r\n  get effectFabric(): boolean {\r\n    return this.effect() === 'fabric';\r\n  }\r\n\r\n  @HostBinding('class.effect-slide')\r\n  get effectSlide(): boolean {\r\n    return this.effect() === 'slide';\r\n  }\r\n\r\n  @HostBinding('class.effect-push')\r\n  get effectPush(): boolean {\r\n    return this.effect() === 'push';\r\n  }\r\n\r\n  @HostBinding('class.effect-scale')\r\n  get effectScale(): boolean {\r\n    return this.effect() === 'scale';\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Constructor\r\n  // ---------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    this.setupResponsive();\r\n\r\n    effect(() => {\r\n      const mode = this.currentMode();\r\n\r\n      if (!this.initialized()) {\r\n        return;\r\n      }\r\n\r\n      this.handleResponsiveModeChange(mode);\r\n    });\r\n\r\n    effect(() => {\r\n      const shouldLock = this.lockBodyScroll();\r\n      const shouldLockNow = this.isOverlay() && this.open();\r\n\r\n      if (!shouldLock) {\r\n        return;\r\n      }\r\n\r\n      if (shouldLockNow) {\r\n        this.lockScroll();\r\n      } else {\r\n        this.unlockScroll();\r\n      }\r\n    });\r\n\r\n    this.destroyRef.onDestroy(() => {\r\n      this.destroyResponsive();\r\n\r\n      this.unlockScroll();\r\n    });\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Responsive\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private setupResponsive(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    afterNextRender(() => {\r\n      this.setupMediaQuery();\r\n\r\n      this.initialized.set(true);\r\n\r\n      const mode = this.currentMode();\r\n\r\n      this.previousResponsiveMode = mode;\r\n\r\n      this.applyInitialResponsiveState(mode);\r\n    });\r\n  }\r\n\r\n  private setupMediaQuery(): void {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.mode !== 'auto') {\r\n      this.isMobile.set(config.mode === 'mobile');\r\n\r\n      return;\r\n    }\r\n\r\n    const breakpoint = config.breakpoint;\r\n\r\n    this.mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\r\n\r\n    this.updateMobileState();\r\n\r\n    const listener = () => {\r\n      this.updateMobileState();\r\n    };\r\n\r\n    this.mediaQuery.addEventListener('change', listener);\r\n\r\n    this.removeMediaQueryListener = () => {\r\n      this.mediaQuery?.removeEventListener('change', listener);\r\n    };\r\n  }\r\n\r\n  private updateMobileState(): void {\r\n    if (!this.mediaQuery) {\r\n      return;\r\n    }\r\n\r\n    this.isMobile.set(this.mediaQuery.matches);\r\n  }\r\n\r\n  private handleResponsiveModeChange(mode: 'desktop' | 'mobile'): void {\r\n    if (this.previousResponsiveMode === null) {\r\n      this.previousResponsiveMode = mode;\r\n      return;\r\n    }\r\n\r\n    if (this.previousResponsiveMode === mode) {\r\n      return;\r\n    }\r\n\r\n    const previousMode = this.previousResponsiveMode;\r\n\r\n    this.previousResponsiveMode = mode;\r\n\r\n    const config = this.responsiveConfig();\r\n\r\n    /**\r\n     * If pinned should be respected,\r\n     * don't overwrite the current open state.\r\n     */\r\n    if (config.respectPinned && this.pinned()) {\r\n      return;\r\n    }\r\n\r\n    if (mode === 'desktop') {\r\n      this.open.set(config.desktopOpen);\r\n    } else {\r\n      this.open.set(config.mobileOpen);\r\n    }\r\n\r\n    this.renderer.setAttribute(this.elementRef.nativeElement, 'data-previous-mode', previousMode);\r\n  }\r\n\r\n  private applyInitialResponsiveState(mode: 'desktop' | 'mobile'): void {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.respectPinned && this.pinned()) {\r\n      return;\r\n    }\r\n\r\n    /**\r\n     * Don't blindly overwrite an explicitly bound\r\n     * [(open)] value after initialization.\r\n     *\r\n     * The default is only applied when the model\r\n     * has not already been initialized.\r\n     */\r\n    if (mode === 'desktop') {\r\n      this.open.set(config.desktopOpen);\r\n    } else {\r\n      this.open.set(config.mobileOpen);\r\n    }\r\n  }\r\n\r\n  private destroyResponsive(): void {\r\n    this.removeMediaQueryListener?.();\r\n\r\n    this.mediaQuery = undefined;\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Public API\r\n  // ---------------------------------------------------------------------------\r\n\r\n  toggle(): void {\r\n    if (this.open()) {\r\n      this.close();\r\n    } else {\r\n      this.openDrawer();\r\n    }\r\n  }\r\n\r\n  openDrawer(): void {\r\n    this.open.set(true);\r\n  }\r\n\r\n  close(): void {\r\n    if (this.pinned() && this.isPinnedAndDesktop()) {\r\n      return;\r\n    }\r\n\r\n    this.open.set(false);\r\n  }\r\n\r\n  pin(): void {\r\n    this.pinned.set(true);\r\n    this.open.set(true);\r\n  }\r\n\r\n  unpin(): void {\r\n    this.pinned.set(false);\r\n  }\r\n\r\n  togglePinned(): void {\r\n    if (this.pinned()) {\r\n      this.unpin();\r\n    } else {\r\n      this.pin();\r\n    }\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Events\r\n  // ---------------------------------------------------------------------------\r\n\r\n  onBackdropClick(): void {\r\n    if (!this.closeOnBackdrop()) {\r\n      return;\r\n    }\r\n\r\n    this.close();\r\n  }\r\n\r\n  onKeyDown(event: KeyboardEvent): void {\r\n    if (event.key !== 'Escape') {\r\n      return;\r\n    }\r\n\r\n    if (!this.closeOnEscape()) {\r\n      return;\r\n    }\r\n\r\n    if (!this.open()) {\r\n      return;\r\n    }\r\n\r\n    this.close();\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Scroll locking\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private lockScroll(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    if (!document.body) {\r\n      return;\r\n    }\r\n\r\n    if (document.body.dataset['ngxDrawerScrollLocked'] === 'true') {\r\n      return;\r\n    }\r\n\r\n    this.renderer.setAttribute(document.body, 'data-ngx-drawer-scroll-locked', 'true');\r\n\r\n    this.renderer.setStyle(document.body, 'overflow', 'hidden');\r\n  }\r\n\r\n  private unlockScroll(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    if (!document.body) {\r\n      return;\r\n    }\r\n\r\n    if (document.body.dataset['ngxDrawerScrollLocked'] !== 'true') {\r\n      return;\r\n    }\r\n\r\n    this.renderer.removeAttribute(document.body, 'data-ngx-drawer-scroll-locked');\r\n\r\n    this.renderer.removeStyle(document.body, 'overflow');\r\n  }\r\n}\r\n","<div\r\n  class=\"ngx-drawer-root\"\r\n  [class.is-open]=\"drawerVisible()\"\r\n  [class.is-closed]=\"!drawerVisible()\"\r\n  [class.is-overlay]=\"isOverlay()\"\r\n  [class.is-dock]=\"isDocked()\"\r\n  [class.is-pinned]=\"pinned()\"\r\n  [class.is-mobile]=\"currentMode() === 'mobile'\"\r\n  [class.is-desktop]=\"currentMode() === 'desktop'\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  tabindex=\"-1\">\r\n  <!-- ===================================================================== -->\r\n  <!-- Backdrop                                                               -->\r\n  <!-- ===================================================================== -->\r\n\r\n  @if (shouldShowBackdrop()) {\r\n    <div class=\"ngx-drawer-backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\r\n  }\r\n\r\n  <!-- ===================================================================== -->\r\n  <!-- Drawer                                                                 -->\r\n  <!-- ===================================================================== -->\r\n\r\n  <aside\r\n    class=\"ngx-drawer\"\r\n    [attr.aria-hidden]=\"!drawerVisible()\"\r\n    [attr.data-side]=\"side()\"\r\n    [attr.data-mode]=\"currentMode()\"\r\n    [attr.data-behavior]=\"currentBehavior()\"\r\n    [attr.data-effect]=\"effect()\"\r\n    [attr.data-pinned]=\"pinned()\">\r\n    <div class=\"ngx-drawer-surface\">\r\n      <!-- Drawer Content -->\r\n      <div class=\"ngx-drawer-content\">\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- ===================================================================== -->\r\n  <!-- Main Content                                                           -->\r\n  <!-- ===================================================================== -->\r\n\r\n  <main class=\"ngx-drawer-main\">\r\n    <div class=\"ngx-drawer-main-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </main>\r\n</div>\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":"ngx-kit-drawer-menu.mjs","sources":["../../../projects/libs/drawer-menu/contracts/drawer-menu-types.ts","../../../projects/libs/drawer-menu/components/drawer-menu.component.ts","../../../projects/libs/drawer-menu/components/drawer-menu.component.html","../../../projects/libs/drawer-menu/ngx-kit-drawer-menu.ts"],"sourcesContent":["/** Logical drawer placement. `start` is right in RTL and left in LTR. */\r\nexport type NgxDrawerSide = 'start' | 'end';\r\n\r\n/** Visual physics used by the drawer while opening/closing. */\r\nexport type NgxDrawerEffect =\r\n  | 'none'\r\n  | 'fabric'\r\n  | 'slide'\r\n  | 'push'\r\n  | 'scale';\r\n\r\nexport type NgxDrawerBehavior =\r\n  | 'dock'\r\n  | 'overlay';\r\n\r\nexport type NgxDrawerResponsiveMode =\r\n  | 'auto'\r\n  | 'desktop'\r\n  | 'mobile';\r\n\r\nexport interface NgxDrawerResponsive {\r\n  /**\r\n   * auto:\r\n   *   breakpoint determines desktop/mobile mode\r\n   *\r\n   * desktop:\r\n   *   always desktop\r\n   *\r\n   * mobile:\r\n   *   always mobile\r\n   */\r\n  mode?: NgxDrawerResponsiveMode;\r\n\r\n  /**\r\n   * Width at which the drawer switches\r\n   * between desktop and mobile.\r\n   */\r\n  breakpoint?: number;\r\n\r\n  /**\r\n   * Initial/default state on desktop.\r\n   */\r\n  desktopOpen?: boolean;\r\n\r\n  /**\r\n   * Initial/default state on mobile.\r\n   */\r\n  mobileOpen?: boolean;\r\n\r\n  /**\r\n   * Desktop drawer behavior.\r\n   */\r\n  desktopBehavior?: NgxDrawerBehavior;\r\n\r\n  /**\r\n   * Mobile drawer behavior.\r\n   */\r\n  mobileBehavior?: NgxDrawerBehavior;\r\n\r\n  /**\r\n   * If true, pinned state is preserved\r\n   * when switching between desktop/mobile.\r\n   */\r\n  respectPinned?: boolean;\r\n}\r\n\r\nexport const DEFAULT_DRAWER_RESPONSIVE: Required<NgxDrawerResponsive> = {\r\n  mode: 'auto',\r\n  breakpoint: 960,\r\n  desktopOpen: true,\r\n  mobileOpen: false,\r\n  desktopBehavior: 'dock',\r\n  mobileBehavior: 'overlay',\r\n  respectPinned: true,\r\n};","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  HostBinding,\r\n  PLATFORM_ID,\r\n  Renderer2,\r\n  afterNextRender,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n} from '@angular/core';\r\n\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport {\r\n  DEFAULT_DRAWER_RESPONSIVE,\r\n  NgxDrawerBehavior,\r\n  NgxDrawerEffect,\r\n  NgxDrawerResponsive,\r\n  NgxDrawerSide,\r\n} from '../contracts/drawer-menu-types';\r\n\r\n@Component({\r\n  selector: 'ngx-drawer-menu',\r\n  standalone: true,\r\n  templateUrl: './drawer-menu.component.html',\r\n  styleUrl: './drawer-menu.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxDrawerMenuComponent {\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly platformId = inject(PLATFORM_ID);\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Inputs\r\n  // ---------------------------------------------------------------------------\r\n\r\n  readonly side = input<NgxDrawerSide>('start');\r\n\r\n  readonly effect = input<NgxDrawerEffect>('fabric');\r\n\r\n  readonly width = input<number | string>(300);\r\n\r\n  /**\r\n   * Main drawer state.\r\n   *\r\n   * Usage:\r\n   *\r\n   * [(open)]=\"sidebarOpen\"\r\n   */\r\n  readonly open = model<boolean>(false);\r\n\r\n  /**\r\n   * Pinned state.\r\n   *\r\n   * Useful for desktop layouts.\r\n   *\r\n   * [(pinned)]=\"sidebarPinned\"\r\n   */\r\n  readonly pinned = model<boolean>(false);\r\n\r\n  readonly responsive = input<NgxDrawerResponsive>(DEFAULT_DRAWER_RESPONSIVE);\r\n\r\n  /**\r\n   * Whether clicking backdrop closes drawer.\r\n   */\r\n  readonly closeOnBackdrop = input(true);\r\n\r\n  /**\r\n   * Whether Escape closes drawer.\r\n   */\r\n  readonly closeOnEscape = input(true);\r\n\r\n  /**\r\n   * Whether body scrolling should be locked\r\n   * while an overlay drawer is open.\r\n   */\r\n  readonly lockBodyScroll = input(true);\r\n\r\n  /**\r\n   * Animation duration in milliseconds.\r\n   */\r\n  readonly animationDuration = input(280);\r\n\r\n  /**\r\n   * z-index.\r\n   */\r\n  readonly zIndex = input(1000);\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Internal state\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private readonly isBrowser = isPlatformBrowser(this.platformId);\r\n\r\n  readonly isMobile = signal(false);\r\n\r\n  readonly initialized = signal(false);\r\n\r\n  /**\r\n   * Used to avoid applying responsive defaults repeatedly.\r\n   */\r\n  private previousResponsiveMode: 'desktop' | 'mobile' | null = null;\r\n\r\n  private mediaQuery?: MediaQueryList;\r\n\r\n  private removeMediaQueryListener?: () => void;\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Computed\r\n  // ---------------------------------------------------------------------------\r\n\r\n  readonly responsiveConfig = computed(() => {\r\n    const config = this.responsive();\r\n\r\n    return {\r\n      ...DEFAULT_DRAWER_RESPONSIVE,\r\n      ...config,\r\n    };\r\n  });\r\n\r\n  readonly currentMode = computed<'desktop' | 'mobile'>(() => {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.mode === 'desktop') {\r\n      return 'desktop';\r\n    }\r\n\r\n    if (config.mode === 'mobile') {\r\n      return 'mobile';\r\n    }\r\n\r\n    return this.isMobile() ? 'mobile' : 'desktop';\r\n  });\r\n\r\n  readonly currentBehavior = computed<NgxDrawerBehavior>(() => {\r\n    const config = this.responsiveConfig();\r\n\r\n    return this.currentMode() === 'mobile' ? config.mobileBehavior : config.desktopBehavior;\r\n  });\r\n\r\n  readonly isOverlay = computed(() => {\r\n    return this.currentBehavior() === 'overlay';\r\n  });\r\n\r\n  readonly isDocked = computed(() => {\r\n    return this.currentBehavior() === 'dock';\r\n  });\r\n\r\n  readonly shouldShowBackdrop = computed(() => {\r\n    return this.isOverlay() && this.open();\r\n  });\r\n\r\n  readonly drawerWidth = computed(() => {\r\n    const width = this.width();\r\n\r\n    if (typeof width === 'number') {\r\n      return `${width}px`;\r\n    }\r\n\r\n    return width;\r\n  });\r\n\r\n  readonly drawerVisible = computed(() => {\r\n    return this.open();\r\n  });\r\n\r\n  readonly shouldPreservePinned = computed(() => {\r\n    return this.responsiveConfig().respectPinned;\r\n  });\r\n\r\n  readonly isPinnedAndDesktop = computed(() => {\r\n    return this.currentMode() === 'desktop' && this.pinned() && this.shouldPreservePinned();\r\n  });\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Host bindings\r\n  // ---------------------------------------------------------------------------\r\n\r\n  @HostBinding('class.drawer-start')\r\n  get drawerStart(): boolean {\r\n    return this.side() === 'start';\r\n  }\r\n\r\n  @HostBinding('class.drawer-end')\r\n  get drawerEnd(): boolean {\r\n    return this.side() === 'end';\r\n  }\r\n\r\n  @HostBinding('class.drawer-open')\r\n  get drawerOpen(): boolean {\r\n    return this.open();\r\n  }\r\n\r\n  @HostBinding('class.drawer-mobile')\r\n  get drawerMobile(): boolean {\r\n    return this.currentMode() === 'mobile';\r\n  }\r\n\r\n  @HostBinding('class.drawer-desktop')\r\n  get drawerDesktop(): boolean {\r\n    return this.currentMode() === 'desktop';\r\n  }\r\n\r\n  @HostBinding('class.drawer-overlay')\r\n  get drawerOverlay(): boolean {\r\n    return this.isOverlay();\r\n  }\r\n\r\n  @HostBinding('class.drawer-dock')\r\n  get drawerDock(): boolean {\r\n    return this.isDocked();\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-width')\r\n  get hostWidth(): string {\r\n    return this.drawerWidth();\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-duration')\r\n  get hostDuration(): string {\r\n    return `${this.animationDuration()}ms`;\r\n  }\r\n\r\n  @HostBinding('style.--ngx-drawer-z-index')\r\n  get hostZIndex(): number {\r\n    return this.zIndex();\r\n  }\r\n\r\n  @HostBinding('class.effect-none')\r\n  get effectNone(): boolean {\r\n    return this.effect() === 'none';\r\n  }\r\n\r\n  @HostBinding('class.effect-fabric')\r\n  get effectFabric(): boolean {\r\n    return this.effect() === 'fabric';\r\n  }\r\n\r\n  @HostBinding('class.effect-slide')\r\n  get effectSlide(): boolean {\r\n    return this.effect() === 'slide';\r\n  }\r\n\r\n  @HostBinding('class.effect-push')\r\n  get effectPush(): boolean {\r\n    return this.effect() === 'push';\r\n  }\r\n\r\n  @HostBinding('class.effect-scale')\r\n  get effectScale(): boolean {\r\n    return this.effect() === 'scale';\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Constructor\r\n  // ---------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    this.setupResponsive();\r\n\r\n    effect(() => {\r\n      const mode = this.currentMode();\r\n\r\n      if (!this.initialized()) {\r\n        return;\r\n      }\r\n\r\n      this.handleResponsiveModeChange(mode);\r\n    });\r\n\r\n    effect(() => {\r\n      const shouldLock = this.lockBodyScroll();\r\n      const shouldLockNow = this.isOverlay() && this.open();\r\n\r\n      if (!shouldLock) {\r\n        return;\r\n      }\r\n\r\n      if (shouldLockNow) {\r\n        this.lockScroll();\r\n      } else {\r\n        this.unlockScroll();\r\n      }\r\n    });\r\n\r\n    this.destroyRef.onDestroy(() => {\r\n      this.destroyResponsive();\r\n\r\n      this.unlockScroll();\r\n    });\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Responsive\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private setupResponsive(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    afterNextRender(() => {\r\n      this.setupMediaQuery();\r\n\r\n      this.initialized.set(true);\r\n\r\n      const mode = this.currentMode();\r\n\r\n      this.previousResponsiveMode = mode;\r\n\r\n      this.applyInitialResponsiveState(mode);\r\n    });\r\n  }\r\n\r\n  private setupMediaQuery(): void {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.mode !== 'auto' || this.isBrowser) {\r\n      this.isMobile.set(config.mode === 'mobile');\r\n\r\n      return;\r\n    }\r\n\r\n    const breakpoint = config.breakpoint;\r\n\r\n    this.mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\r\n\r\n    this.updateMobileState();\r\n\r\n    const listener = () => {\r\n      this.updateMobileState();\r\n    };\r\n\r\n    this.mediaQuery.addEventListener('change', listener);\r\n\r\n    this.removeMediaQueryListener = () => {\r\n      this.mediaQuery?.removeEventListener('change', listener);\r\n    };\r\n  }\r\n\r\n  private updateMobileState(): void {\r\n    if (!this.mediaQuery) {\r\n      return;\r\n    }\r\n\r\n    this.isMobile.set(this.mediaQuery.matches);\r\n  }\r\n\r\n  private handleResponsiveModeChange(mode: 'desktop' | 'mobile'): void {\r\n    if (this.previousResponsiveMode === null) {\r\n      this.previousResponsiveMode = mode;\r\n      return;\r\n    }\r\n\r\n    if (this.previousResponsiveMode === mode) {\r\n      return;\r\n    }\r\n\r\n    const previousMode = this.previousResponsiveMode;\r\n\r\n    this.previousResponsiveMode = mode;\r\n\r\n    const config = this.responsiveConfig();\r\n\r\n    /**\r\n     * If pinned should be respected,\r\n     * don't overwrite the current open state.\r\n     */\r\n    if (config.respectPinned && this.pinned()) {\r\n      return;\r\n    }\r\n\r\n    if (mode === 'desktop') {\r\n      this.open.set(config.desktopOpen);\r\n    } else {\r\n      this.open.set(config.mobileOpen);\r\n    }\r\n\r\n    this.renderer.setAttribute(this.elementRef.nativeElement, 'data-previous-mode', previousMode);\r\n  }\r\n\r\n  private applyInitialResponsiveState(mode: 'desktop' | 'mobile'): void {\r\n    const config = this.responsiveConfig();\r\n\r\n    if (config.respectPinned && this.pinned()) {\r\n      return;\r\n    }\r\n\r\n    /**\r\n     * Don't blindly overwrite an explicitly bound\r\n     * [(open)] value after initialization.\r\n     *\r\n     * The default is only applied when the model\r\n     * has not already been initialized.\r\n     */\r\n    if (mode === 'desktop') {\r\n      this.open.set(config.desktopOpen);\r\n    } else {\r\n      this.open.set(config.mobileOpen);\r\n    }\r\n  }\r\n\r\n  private destroyResponsive(): void {\r\n    this.removeMediaQueryListener?.();\r\n\r\n    this.mediaQuery = undefined;\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Public API\r\n  // ---------------------------------------------------------------------------\r\n\r\n  toggle(): void {\r\n    if (this.open()) {\r\n      this.close();\r\n    } else {\r\n      this.openDrawer();\r\n    }\r\n  }\r\n\r\n  openDrawer(): void {\r\n    this.open.set(true);\r\n  }\r\n\r\n  close(): void {\r\n    if (this.pinned() && this.isPinnedAndDesktop()) {\r\n      return;\r\n    }\r\n\r\n    this.open.set(false);\r\n  }\r\n\r\n  pin(): void {\r\n    this.pinned.set(true);\r\n    this.open.set(true);\r\n  }\r\n\r\n  unpin(): void {\r\n    this.pinned.set(false);\r\n  }\r\n\r\n  togglePinned(): void {\r\n    if (this.pinned()) {\r\n      this.unpin();\r\n    } else {\r\n      this.pin();\r\n    }\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Events\r\n  // ---------------------------------------------------------------------------\r\n\r\n  onBackdropClick(): void {\r\n    if (!this.closeOnBackdrop()) {\r\n      return;\r\n    }\r\n\r\n    this.close();\r\n  }\r\n\r\n  onKeyDown(event: KeyboardEvent): void {\r\n    if (event.key !== 'Escape') {\r\n      return;\r\n    }\r\n\r\n    if (!this.closeOnEscape()) {\r\n      return;\r\n    }\r\n\r\n    if (!this.open()) {\r\n      return;\r\n    }\r\n\r\n    this.close();\r\n  }\r\n\r\n  // ---------------------------------------------------------------------------\r\n  // Scroll locking\r\n  // ---------------------------------------------------------------------------\r\n\r\n  private lockScroll(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    if (!document.body) {\r\n      return;\r\n    }\r\n\r\n    if (document.body.dataset['ngxDrawerScrollLocked'] === 'true') {\r\n      return;\r\n    }\r\n\r\n    this.renderer.setAttribute(document.body, 'data-ngx-drawer-scroll-locked', 'true');\r\n\r\n    this.renderer.setStyle(document.body, 'overflow', 'hidden');\r\n  }\r\n\r\n  private unlockScroll(): void {\r\n    if (!this.isBrowser) {\r\n      return;\r\n    }\r\n\r\n    if (!document.body) {\r\n      return;\r\n    }\r\n\r\n    if (document.body.dataset['ngxDrawerScrollLocked'] !== 'true') {\r\n      return;\r\n    }\r\n\r\n    this.renderer.removeAttribute(document.body, 'data-ngx-drawer-scroll-locked');\r\n\r\n    this.renderer.removeStyle(document.body, 'overflow');\r\n  }\r\n}\r\n","<div\r\n  class=\"ngx-drawer-root\"\r\n  [class.is-open]=\"drawerVisible()\"\r\n  [class.is-closed]=\"!drawerVisible()\"\r\n  [class.is-overlay]=\"isOverlay()\"\r\n  [class.is-dock]=\"isDocked()\"\r\n  [class.is-pinned]=\"pinned()\"\r\n  [class.is-mobile]=\"currentMode() === 'mobile'\"\r\n  [class.is-desktop]=\"currentMode() === 'desktop'\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  tabindex=\"-1\">\r\n  <!-- ===================================================================== -->\r\n  <!-- Backdrop                                                               -->\r\n  <!-- ===================================================================== -->\r\n\r\n  @if (shouldShowBackdrop()) {\r\n    <div class=\"ngx-drawer-backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\r\n  }\r\n\r\n  <!-- ===================================================================== -->\r\n  <!-- Drawer                                                                 -->\r\n  <!-- ===================================================================== -->\r\n\r\n  <aside\r\n    class=\"ngx-drawer\"\r\n    [attr.aria-hidden]=\"!drawerVisible()\"\r\n    [attr.data-side]=\"side()\"\r\n    [attr.data-mode]=\"currentMode()\"\r\n    [attr.data-behavior]=\"currentBehavior()\"\r\n    [attr.data-effect]=\"effect()\"\r\n    [attr.data-pinned]=\"pinned()\">\r\n    <div class=\"ngx-drawer-surface\">\r\n      <!-- Drawer Content -->\r\n      <div class=\"ngx-drawer-content\">\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- ===================================================================== -->\r\n  <!-- Main Content                                                           -->\r\n  <!-- ===================================================================== -->\r\n\r\n  <main class=\"ngx-drawer-main\">\r\n    <div class=\"ngx-drawer-main-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </main>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-kit-form-field.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostListener, Directive } from '@angular/core';
+import { InjectionToken, signal, inject, input, computed, model, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostListener, Directive } from '@angular/core';
 
 const MX_FORM_FIELD = new InjectionToken('mx-form-field', {
     factory: () => new MgxFormFieldRef(),
@@ -35,13 +35,19 @@ class NgxFormField {
     ...(ngDevMode ? [{ debugName: "hintVisible" }] : /* istanbul ignore next */ []));
     errorVisible = computed(() => this.invalid(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorVisible" }] : /* istanbul ignore next */ []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    errorMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    rows = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxFormField, isStandalone: true, selector: "ngx-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"mx-form-field\"\n  [class.mx-form-field--float]=\"float()\"\n  [class.mx-form-field--disabled]=\"disabled()\"\n  [class.mx-form-field--readonly]=\"readonly()\"\n  [class.mx-form-field--invalid]=\"invalid()\"\n  [class.mx-form-field--required]=\"required()\">\n  <div class=\"mx-form-field__before\">\n    <div class=\"mx-form-field__prefix\">\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\n\n  <span class=\"mx-form-field__label\">\n    <span [aria-label]=\"label()\">{{ label() }}</span>\n  </span>\n\n  <div class=\"mx-form-field__after\">\n    <div class=\"mx-form-field__suffix\">\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (hintVisible()) {\n  <div class=\"mx-form-field__hint\">\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\n  </div>\n}\n\n@if (errorVisible()) {\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\n  </div>\n}\n", styles: ["ngx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-side-width: 40px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555);--mx-field-label-color: light-dark(#555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888, #999);--mx-field-hint-color: light-dark(#007bd4, #03a9f4);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{position:relative;display:flex;align-items:stretch;width:100%;min-width:220px;height:var(--mx-field-height);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{flex:1 1 auto;border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease,color .15s ease}.mx-form-field__before{display:flex;flex:0 0 var(--mx-field-side-width);min-width:0;border-inline-end:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field__after{display:flex;justify-content:flex-end;min-width:var(--mx-field-side-width);border-inline-start:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field__prefix,.mx-form-field__suffix{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;pointer-events:auto}.mx-form-field__prefix button,.mx-form-field__suffix button{background:none;border:none}.mx-form-field__prefix{padding-inline-start:8px}.mx-form-field__suffix{padding-inline-end:8px}.mx-form-field__prefix:empty,.mx-form-field__suffix:empty{display:none}.mx-form-field__prefix ::ng-deep>*,.mx-form-field__suffix ::ng-deep>*{max-width:100%}.mx-form-field__label{position:relative;display:flex;flex:0 0 auto;align-items:center;min-width:0;max-width:70%;border-inline:0;color:var(--mx-field-label-color);white-space:nowrap;overflow:visible}.mx-form-field__label span{display:block;opacity:.72;transform-origin:center;transform:translateY(0) scale(1);transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;line-height:1.4;text-align:start;caret-color:var(--mx-field-active-color)}.mx-form-field>textarea{min-height:100%;resize:vertical}.mx-form-field>select{cursor:pointer;appearance:none;-webkit-appearance:none}.mx-form-field>input:disabled,.mx-form-field>textarea:disabled,.mx-form-field>select:disabled{cursor:not-allowed}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.75}.mx-form-field:has(>input.has-value) .mx-form-field__label span,.mx-form-field:has(>textarea.has-value) .mx-form-field__label span,.mx-form-field:has(>select.has-value) .mx-form-field__label span,.mx-form-field.mx-form-field--float .mx-form-field__label span,.mx-form-field:focus-within .mx-form-field__label span{transform:translateY(-100%) scale(.86);opacity:1}.mx-form-field:has(>input.has-value) .mx-form-field__label,.mx-form-field:has(>textarea.has-value) .mx-form-field__label,.mx-form-field:has(>select.has-value) .mx-form-field__label,.mx-form-field.mx-form-field--float .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__label{border-top-width:0}.mx-form-field:has(>input.has-value) .mx-form-field__label:before,.mx-form-field:has(>input.has-value) .mx-form-field__label:after,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:before,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:after,.mx-form-field:has(>select.has-value) .mx-form-field__label:before,.mx-form-field:has(>select.has-value) .mx-form-field__label:after,.mx-form-field.mx-form-field--float .mx-form-field__label:before,.mx-form-field.mx-form-field--float .mx-form-field__label:after,.mx-form-field:focus-within .mx-form-field__label:before,.mx-form-field:focus-within .mx-form-field__label:after{width:0}.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__before,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__label,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:var(--mx-field-active-color)}.mx-form-field:focus-within .mx-form-field__label span{color:var(--mx-field-active-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__before,.mx-form-field.mx-form-field--invalid .mx-form-field__label,.mx-form-field.mx-form-field--invalid .mx-form-field__after,.mx-form-field:has(>input.ng-invalid) .mx-form-field__before,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label,.mx-form-field:has(>input.ng-invalid) .mx-form-field__after,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__before,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__after,.mx-form-field:has(>select.ng-invalid) .mx-form-field__before,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label,.mx-form-field:has(>select.ng-invalid) .mx-form-field__after{border-color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__label span,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label span{color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid:focus-within:after,.mx-form-field:has(>input.ng-invalid:focus):after,.mx-form-field:has(>textarea.ng-invalid:focus):after,.mx-form-field:has(>select.ng-invalid:focus):after{border-color:color-mix(in srgb,var(--mx-field-invalid-color) 20%,transparent)}.mx-form-field>input:user-invalid,.mx-form-field>textarea:user-invalid,.mx-form-field>select:user-invalid{color:var(--mx-field-text-color)}.mx-form-field.mx-form-field--disabled{opacity:.62;cursor:not-allowed}.mx-form-field.mx-form-field--disabled .mx-form-field__before,.mx-form-field.mx-form-field--disabled .mx-form-field__label,.mx-form-field.mx-form-field--disabled .mx-form-field__after{border-color:var(--mx-field-disabled-color)}.mx-form-field.mx-form-field--readonly .mx-form-field__label{color:var(--mx-field-label-color)}.mx-form-field.mx-form-field--readonly>input,.mx-form-field.mx-form-field--readonly>textarea{cursor:default}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field__hint,.mx-form-field__error-list{display:block;margin-top:5px;padding-inline:2px;font-size:.8rem;line-height:1.4}.mx-form-field__hint{color:var(--mx-field-hint-color)}.mx-form-field__error-list{color:var(--mx-field-invalid-color)}[dir=rtl] .mx-form-field__before{border-inline-start:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-end:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}[dir=rtl] .mx-form-field__after{border-inline-end:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-start:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}[dir=rtl] .mx-form-field__label span{transform-origin:center}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:Highlight}.mx-form-field__label span{color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxFormField, isStandalone: true, selector: "ngx-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div\n  class=\"mx-form-field\"\n  [class.mx-form-field--float]=\"float()\"\n  [class.mx-form-field--disabled]=\"disabled()\"\n  [class.mx-form-field--readonly]=\"readonly()\"\n  [class.mx-form-field--invalid]=\"invalid()\"\n  [class.mx-form-field--required]=\"required()\">\n  <div class=\"mx-form-field__before\">\n    <div class=\"mx-form-field__prefix\">\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\n\n  <span class=\"mx-form-field__label\">\n    <span [aria-label]=\"label()\">{{ label() }}</span>\n  </span>\n\n  <div class=\"mx-form-field__after\">\n    <div class=\"mx-form-field__suffix\">\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (hintVisible()) {\n  <div class=\"mx-form-field__hint\">\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\n  </div>\n}\n\n@if (errorVisible()) {\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\n  </div>\n}\n", styles: ["ngx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-side-width: 40px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555);--mx-field-label-color: light-dark(#555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888, #999);--mx-field-hint-color: light-dark(#007bd4, #03a9f4);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{position:relative;display:flex;align-items:stretch;width:100%;min-width:220px;height:var(--mx-field-height);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{flex:1 1 auto;border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease,color .15s ease}.mx-form-field__before{display:flex;flex:0 0 var(--mx-field-side-width);min-width:0;border-inline-end:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field__after{display:flex;justify-content:flex-end;min-width:var(--mx-field-side-width);border-inline-start:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field__prefix,.mx-form-field__suffix{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;pointer-events:auto}.mx-form-field__prefix button,.mx-form-field__suffix button{background:none;border:none}.mx-form-field__prefix{padding-inline-start:8px}.mx-form-field__suffix{padding-inline-end:8px}.mx-form-field__prefix:empty,.mx-form-field__suffix:empty{display:none}.mx-form-field__prefix ::ng-deep>*,.mx-form-field__suffix ::ng-deep>*{max-width:100%}.mx-form-field__label{position:relative;display:flex;flex:0 0 auto;align-items:center;min-width:0;max-width:70%;border-inline:0;color:var(--mx-field-label-color);white-space:nowrap;overflow:visible}.mx-form-field__label span{display:block;opacity:.72;transform-origin:center;transform:translateY(0) scale(1);transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;line-height:1.4;text-align:start;caret-color:var(--mx-field-active-color)}.mx-form-field>textarea{min-height:100%;resize:vertical}.mx-form-field>select{cursor:pointer;appearance:none;-webkit-appearance:none}.mx-form-field>input:disabled,.mx-form-field>textarea:disabled,.mx-form-field>select:disabled{cursor:not-allowed}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.75}.mx-form-field:has(>input.has-value) .mx-form-field__label span,.mx-form-field:has(>textarea.has-value) .mx-form-field__label span,.mx-form-field:has(>select.has-value) .mx-form-field__label span,.mx-form-field.mx-form-field--float .mx-form-field__label span,.mx-form-field:focus-within .mx-form-field__label span{transform:translateY(-100%) scale(.86);opacity:1}.mx-form-field:has(>input.has-value) .mx-form-field__label,.mx-form-field:has(>textarea.has-value) .mx-form-field__label,.mx-form-field:has(>select.has-value) .mx-form-field__label,.mx-form-field.mx-form-field--float .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__label{border-top-width:0}.mx-form-field:has(>input.has-value) .mx-form-field__label:before,.mx-form-field:has(>input.has-value) .mx-form-field__label:after,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:before,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:after,.mx-form-field:has(>select.has-value) .mx-form-field__label:before,.mx-form-field:has(>select.has-value) .mx-form-field__label:after,.mx-form-field.mx-form-field--float .mx-form-field__label:before,.mx-form-field.mx-form-field--float .mx-form-field__label:after,.mx-form-field:focus-within .mx-form-field__label:before,.mx-form-field:focus-within .mx-form-field__label:after{width:0}.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__before,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__label,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:var(--mx-field-active-color)}.mx-form-field:focus-within .mx-form-field__label span{color:var(--mx-field-active-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__before,.mx-form-field.mx-form-field--invalid .mx-form-field__label,.mx-form-field.mx-form-field--invalid .mx-form-field__after,.mx-form-field:has(>input.ng-invalid) .mx-form-field__before,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label,.mx-form-field:has(>input.ng-invalid) .mx-form-field__after,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__before,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__after,.mx-form-field:has(>select.ng-invalid) .mx-form-field__before,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label,.mx-form-field:has(>select.ng-invalid) .mx-form-field__after{border-color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__label span,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label span{color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid:focus-within:after,.mx-form-field:has(>input.ng-invalid:focus):after,.mx-form-field:has(>textarea.ng-invalid:focus):after,.mx-form-field:has(>select.ng-invalid:focus):after{border-color:color-mix(in srgb,var(--mx-field-invalid-color) 20%,transparent)}.mx-form-field>input:user-invalid,.mx-form-field>textarea:user-invalid,.mx-form-field>select:user-invalid{color:var(--mx-field-text-color)}.mx-form-field.mx-form-field--disabled{opacity:.62;cursor:not-allowed}.mx-form-field.mx-form-field--disabled .mx-form-field__before,.mx-form-field.mx-form-field--disabled .mx-form-field__label,.mx-form-field.mx-form-field--disabled .mx-form-field__after{border-color:var(--mx-field-disabled-color)}.mx-form-field.mx-form-field--readonly .mx-form-field__label{color:var(--mx-field-label-color)}.mx-form-field.mx-form-field--readonly>input,.mx-form-field.mx-form-field--readonly>textarea{cursor:default}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field__hint,.mx-form-field__error-list{display:block;margin-top:5px;padding-inline:2px;font-size:.8rem;line-height:1.4}.mx-form-field__hint{color:var(--mx-field-hint-color)}.mx-form-field__error-list{color:var(--mx-field-invalid-color)}[dir=rtl] .mx-form-field__before{border-inline-start:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-end:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}[dir=rtl] .mx-form-field__after{border-inline-end:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-start:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}[dir=rtl] .mx-form-field__label span{transform-origin:center}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:Highlight}.mx-form-field__label span{color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"mx-form-field\"\n  [class.mx-form-field--float]=\"float()\"\n  [class.mx-form-field--disabled]=\"disabled()\"\n  [class.mx-form-field--readonly]=\"readonly()\"\n  [class.mx-form-field--invalid]=\"invalid()\"\n  [class.mx-form-field--required]=\"required()\">\n  <div class=\"mx-form-field__before\">\n    <div class=\"mx-form-field__prefix\">\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\n\n  <span class=\"mx-form-field__label\">\n    <span [aria-label]=\"label()\">{{ label() }}</span>\n  </span>\n\n  <div class=\"mx-form-field__after\">\n    <div class=\"mx-form-field__suffix\">\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (hintVisible()) {\n  <div class=\"mx-form-field__hint\">\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\n  </div>\n}\n\n@if (errorVisible()) {\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\n  </div>\n}\n", styles: ["ngx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-side-width: 40px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555);--mx-field-label-color: light-dark(#555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888, #999);--mx-field-hint-color: light-dark(#007bd4, #03a9f4);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{position:relative;display:flex;align-items:stretch;width:100%;min-width:220px;height:var(--mx-field-height);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{flex:1 1 auto;border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease,color .15s ease}.mx-form-field__before{display:flex;flex:0 0 var(--mx-field-side-width);min-width:0;border-inline-end:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field__after{display:flex;justify-content:flex-end;min-width:var(--mx-field-side-width);border-inline-start:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field__prefix,.mx-form-field__suffix{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;pointer-events:auto}.mx-form-field__prefix button,.mx-form-field__suffix button{background:none;border:none}.mx-form-field__prefix{padding-inline-start:8px}.mx-form-field__suffix{padding-inline-end:8px}.mx-form-field__prefix:empty,.mx-form-field__suffix:empty{display:none}.mx-form-field__prefix ::ng-deep>*,.mx-form-field__suffix ::ng-deep>*{max-width:100%}.mx-form-field__label{position:relative;display:flex;flex:0 0 auto;align-items:center;min-width:0;max-width:70%;border-inline:0;color:var(--mx-field-label-color);white-space:nowrap;overflow:visible}.mx-form-field__label span{display:block;opacity:.72;transform-origin:center;transform:translateY(0) scale(1);transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;line-height:1.4;text-align:start;caret-color:var(--mx-field-active-color)}.mx-form-field>textarea{min-height:100%;resize:vertical}.mx-form-field>select{cursor:pointer;appearance:none;-webkit-appearance:none}.mx-form-field>input:disabled,.mx-form-field>textarea:disabled,.mx-form-field>select:disabled{cursor:not-allowed}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.75}.mx-form-field:has(>input.has-value) .mx-form-field__label span,.mx-form-field:has(>textarea.has-value) .mx-form-field__label span,.mx-form-field:has(>select.has-value) .mx-form-field__label span,.mx-form-field.mx-form-field--float .mx-form-field__label span,.mx-form-field:focus-within .mx-form-field__label span{transform:translateY(-100%) scale(.86);opacity:1}.mx-form-field:has(>input.has-value) .mx-form-field__label,.mx-form-field:has(>textarea.has-value) .mx-form-field__label,.mx-form-field:has(>select.has-value) .mx-form-field__label,.mx-form-field.mx-form-field--float .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__label{border-top-width:0}.mx-form-field:has(>input.has-value) .mx-form-field__label:before,.mx-form-field:has(>input.has-value) .mx-form-field__label:after,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:before,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:after,.mx-form-field:has(>select.has-value) .mx-form-field__label:before,.mx-form-field:has(>select.has-value) .mx-form-field__label:after,.mx-form-field.mx-form-field--float .mx-form-field__label:before,.mx-form-field.mx-form-field--float .mx-form-field__label:after,.mx-form-field:focus-within .mx-form-field__label:before,.mx-form-field:focus-within .mx-form-field__label:after{width:0}.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__before,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__label,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:var(--mx-field-active-color)}.mx-form-field:focus-within .mx-form-field__label span{color:var(--mx-field-active-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__before,.mx-form-field.mx-form-field--invalid .mx-form-field__label,.mx-form-field.mx-form-field--invalid .mx-form-field__after,.mx-form-field:has(>input.ng-invalid) .mx-form-field__before,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label,.mx-form-field:has(>input.ng-invalid) .mx-form-field__after,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__before,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__after,.mx-form-field:has(>select.ng-invalid) .mx-form-field__before,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label,.mx-form-field:has(>select.ng-invalid) .mx-form-field__after{border-color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__label span,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label span{color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid:focus-within:after,.mx-form-field:has(>input.ng-invalid:focus):after,.mx-form-field:has(>textarea.ng-invalid:focus):after,.mx-form-field:has(>select.ng-invalid:focus):after{border-color:color-mix(in srgb,var(--mx-field-invalid-color) 20%,transparent)}.mx-form-field>input:user-invalid,.mx-form-field>textarea:user-invalid,.mx-form-field>select:user-invalid{color:var(--mx-field-text-color)}.mx-form-field.mx-form-field--disabled{opacity:.62;cursor:not-allowed}.mx-form-field.mx-form-field--disabled .mx-form-field__before,.mx-form-field.mx-form-field--disabled .mx-form-field__label,.mx-form-field.mx-form-field--disabled .mx-form-field__after{border-color:var(--mx-field-disabled-color)}.mx-form-field.mx-form-field--readonly .mx-form-field__label{color:var(--mx-field-label-color)}.mx-form-field.mx-form-field--readonly>input,.mx-form-field.mx-form-field--readonly>textarea{cursor:default}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field__hint,.mx-form-field__error-list{display:block;margin-top:5px;padding-inline:2px;font-size:.8rem;line-height:1.4}.mx-form-field__hint{color:var(--mx-field-hint-color)}.mx-form-field__error-list{color:var(--mx-field-invalid-color)}[dir=rtl] .mx-form-field__before{border-inline-start:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-end:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}[dir=rtl] .mx-form-field__after{border-inline-end:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-start:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}[dir=rtl] .mx-form-field__label span{transform-origin:center}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:Highlight}.mx-form-field__label span{color:CanvasText}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
 
 class NgxInput {
     el = inject(ElementRef);

package/fesm2022/ngx-kit-form-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-form-field.mjs","sources":["../../../projects/libs/form-field/tokens/form-field.token.ts","../../../projects/libs/form-field/components/form-field.ts","../../../projects/libs/form-field/components/form-field.html","../../../projects/libs/form-field/directives/ngx-input.directive.ts","../../../projects/libs/form-field/directives/ngx-error.directive.ts","../../../projects/libs/form-field/directives/ngx-hint.directive.ts","../../../projects/libs/form-field/directives/ngx-prefix.directive.ts","../../../projects/libs/form-field/directives/ngx-suffix.directive.ts","../../../projects/libs/form-field/ngx-kit-form-field.ts"],"sourcesContent":["import { InjectionToken, signal } from '@angular/core';\r\n\r\nexport const MX_FORM_FIELD = new InjectionToken<MgxFormFieldRef>('mx-form-field', {\r\n  factory: () => new MgxFormFieldRef(),\r\n});\r\n\r\nexport class MgxFormFieldRef {\r\n  readonly value = signal('');\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  inject,\n} from '@angular/core';\n\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\n\n@Component({\n  selector: 'ngx-form-field',\n  standalone: true,\n  templateUrl: './form-field.html',\n  styleUrl: './form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class NgxFormField {\n  protected readonly ref = inject(MX_FORM_FIELD);\n\n  readonly label = input.required<string>();\n\n  /**\n   * Forces the label to float even when the control is empty.\n   * Similar to Material's floatLabel behavior.\n   */\n  readonly float = input(false);\n\n  /**\n   * Explicit state overrides are useful when the projected control\n   * is managed by Angular Forms.\n   */\n  readonly invalid = input(false);\n  readonly required = input(false);\n  readonly disabled = input(false);\n  readonly readonly = input(false);\n\n  readonly hintVisible = computed(() => !this.invalid());\n\n  readonly errorVisible = computed(() => this.invalid());\n}\n","<div\n  class=\"mx-form-field\"\n  [class.mx-form-field--float]=\"float()\"\n  [class.mx-form-field--disabled]=\"disabled()\"\n  [class.mx-form-field--readonly]=\"readonly()\"\n  [class.mx-form-field--invalid]=\"invalid()\"\n  [class.mx-form-field--required]=\"required()\">\n  <div class=\"mx-form-field__before\">\n    <div class=\"mx-form-field__prefix\">\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\n\n  <span class=\"mx-form-field__label\">\n    <span [aria-label]=\"label()\">{{ label() }}</span>\n  </span>\n\n  <div class=\"mx-form-field__after\">\n    <div class=\"mx-form-field__suffix\">\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (hintVisible()) {\n  <div class=\"mx-form-field__hint\">\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\n  </div>\n}\n\n@if (errorVisible()) {\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\n  </div>\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, inject, signal } from '@angular/core';\r\n\r\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\r\n\r\ntype FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\r\n\r\n@Directive({\r\n  selector: '[ngxInput],ngx-input',\r\n  standalone: true,\r\n  host: {\r\n    '[class.has-value]': 'hasValue()',\r\n  },\r\n})\r\nexport class NgxInput implements AfterViewInit {\r\n  private readonly el = inject<ElementRef<FormControlElement>>(ElementRef);\r\n\r\n  private readonly ref = inject(MX_FORM_FIELD);\r\n\r\n  readonly hasValue = signal(false);\r\n\r\n  ngAfterViewInit(): void {\r\n    // Covers initial values coming from [value], Reactive Forms,\r\n    // template-driven forms, browser autofill, etc.\r\n    queueMicrotask(() => this.syncValue());\r\n  }\r\n\r\n  @HostListener('input')\r\n  protected onInput(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  @HostListener('change')\r\n  protected onChange(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  @HostListener('blur')\r\n  protected onBlur(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  private syncValue(): void {\r\n    const value = this.el.nativeElement.value;\r\n\r\n    this.ref.value.set(value);\r\n\r\n    this.hasValue.set(value !== null && value !== undefined && value !== '');\r\n  }\r\n}\r\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxError],ngx-error',\n  standalone: true,\n})\nexport class NgxError {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxHint],ngx-hint',\n  standalone: true,\n})\nexport class NgxHint {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxPrefix],ngx-prefix',\n  standalone: true,\n})\nexport class NgxPrefix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxSuffix],ngx-suffix',\n  standalone: true,\n})\nexport class NgxSuffix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-kit-form-field.mjs","sources":["../../../projects/libs/form-field/tokens/form-field.token.ts","../../../projects/libs/form-field/components/form-field.ts","../../../projects/libs/form-field/components/form-field.html","../../../projects/libs/form-field/directives/ngx-input.directive.ts","../../../projects/libs/form-field/directives/ngx-error.directive.ts","../../../projects/libs/form-field/directives/ngx-hint.directive.ts","../../../projects/libs/form-field/directives/ngx-prefix.directive.ts","../../../projects/libs/form-field/directives/ngx-suffix.directive.ts","../../../projects/libs/form-field/ngx-kit-form-field.ts"],"sourcesContent":["import { InjectionToken, signal } from '@angular/core';\r\n\r\nexport const MX_FORM_FIELD = new InjectionToken<MgxFormFieldRef>('mx-form-field', {\r\n  factory: () => new MgxFormFieldRef(),\r\n});\r\n\r\nexport class MgxFormFieldRef {\r\n  readonly value = signal('');\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  inject,\n  model,\n  signal,\n} from '@angular/core';\n\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\n\n@Component({\n  selector: 'ngx-form-field',\n  standalone: true,\n  templateUrl: './form-field.html',\n  styleUrl: './form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class NgxFormField {\n  protected readonly ref = inject(MX_FORM_FIELD);\n\n  readonly label = input.required<string>();\n\n  /**\n   * Forces the label to float even when the control is empty.\n   * Similar to Material's floatLabel behavior.\n   */\n  readonly float = input(false);\n\n  /**\n   * Explicit state overrides are useful when the projected control\n   * is managed by Angular Forms.\n   */\n  readonly invalid = input(false);\n  readonly required = input(false);\n  readonly disabled = input(false);\n  readonly readonly = input(false);\n\n  readonly hintVisible = computed(() => !this.invalid());\n\n  readonly errorVisible = computed(() => this.invalid());\n\n  readonly value = model();\n\n  readonly errorMessages = input<string[]>();\n  readonly rows = input<number>();\n}\n","<div\n  class=\"mx-form-field\"\n  [class.mx-form-field--float]=\"float()\"\n  [class.mx-form-field--disabled]=\"disabled()\"\n  [class.mx-form-field--readonly]=\"readonly()\"\n  [class.mx-form-field--invalid]=\"invalid()\"\n  [class.mx-form-field--required]=\"required()\">\n  <div class=\"mx-form-field__before\">\n    <div class=\"mx-form-field__prefix\">\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\n    </div>\n  </div>\n\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\n\n  <span class=\"mx-form-field__label\">\n    <span [aria-label]=\"label()\">{{ label() }}</span>\n  </span>\n\n  <div class=\"mx-form-field__after\">\n    <div class=\"mx-form-field__suffix\">\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (hintVisible()) {\n  <div class=\"mx-form-field__hint\">\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\n  </div>\n}\n\n@if (errorVisible()) {\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\n  </div>\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, inject, signal } from '@angular/core';\r\n\r\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\r\n\r\ntype FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\r\n\r\n@Directive({\r\n  selector: '[ngxInput],ngx-input',\r\n  standalone: true,\r\n  host: {\r\n    '[class.has-value]': 'hasValue()',\r\n  },\r\n})\r\nexport class NgxInput implements AfterViewInit {\r\n  private readonly el = inject<ElementRef<FormControlElement>>(ElementRef);\r\n\r\n  private readonly ref = inject(MX_FORM_FIELD);\r\n\r\n  readonly hasValue = signal(false);\r\n\r\n  ngAfterViewInit(): void {\r\n    // Covers initial values coming from [value], Reactive Forms,\r\n    // template-driven forms, browser autofill, etc.\r\n    queueMicrotask(() => this.syncValue());\r\n  }\r\n\r\n  @HostListener('input')\r\n  protected onInput(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  @HostListener('change')\r\n  protected onChange(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  @HostListener('blur')\r\n  protected onBlur(): void {\r\n    this.syncValue();\r\n  }\r\n\r\n  private syncValue(): void {\r\n    const value = this.el.nativeElement.value;\r\n\r\n    this.ref.value.set(value);\r\n\r\n    this.hasValue.set(value !== null && value !== undefined && value !== '');\r\n  }\r\n}\r\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxError],ngx-error',\n  standalone: true,\n})\nexport class NgxError {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxHint],ngx-hint',\n  standalone: true,\n})\nexport class NgxHint {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxPrefix],ngx-prefix',\n  standalone: true,\n})\nexport class NgxPrefix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxSuffix],ngx-suffix',\n  standalone: true,\n})\nexport class NgxSuffix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-kit-grid-layout.mjs

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 import { signal, computed, effect, Injectable, input, output, inject, ElementRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from 'ngx-kit/drag-resize';
 import { isRtl, NgxDraggable, NgxResizable } from 'ngx-kit/drag-resize';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class GridLayoutOptions {
     cols = 12;
@@ -586,8 +585,11 @@ class GridLayoutService {
             x = leftToCol(leftPx, w, m, true);
         }
         else {
-            if (out.moveLeft)
-                x += Math.round(out.moveLeft / (m.colWidth + gap));
+            //if (out.moveLeft) x += Math.round(out.moveLeft / (m.colWidth + gap));
+            if (out.moveLeft) {
+                const rightEdge = item.config.x + item.config.w;
+                x = rightEdge - w;
+            }
         }
         if (out.moveTop)
             y += Math.round(out.moveTop / (m.rowHeight + gap));
@@ -830,26 +832,26 @@ class NgxGridItemComponent {
     drag = inject(NgxDraggable);
     resize = inject(NgxResizable);
     resizable = computed(() => {
-        return !this.resize.disabled && this.service.editMode();
+        return !this.resize.disabled() && this.service.editMode();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     constructor() {
         // `takeUntilDestroyed()` releases these subscriptions on destroy — the
         // event for every grid item ever created (real damage in layouts where
         // items are added/removed dynamically, e.g. via *ngFor + trackBy).
-        this.drag.dragStart.pipe(takeUntilDestroyed()).subscribe(() => this.onDragStart());
-        this.drag.dragMove.pipe(takeUntilDestroyed()).subscribe(() => this.onDragMove());
-        this.drag.dragEnd.pipe(takeUntilDestroyed()).subscribe(() => this.onDragEnd());
-        this.resize.resizeStart.pipe(takeUntilDestroyed()).subscribe(() => this.onResizeStart());
-        this.resize.resizeMove.pipe(takeUntilDestroyed()).subscribe((v) => this.onResizeMove(v));
-        this.resize.resizeEnd.pipe(takeUntilDestroyed()).subscribe(() => this.onResizeEnd());
+        this.drag.dragStart.subscribe(() => this.onDragStart());
+        this.drag.dragMove.subscribe(() => this.onDragMove());
+        this.drag.dragEnd.subscribe(() => this.onDragEnd());
+        this.resize.resizeStart.subscribe(() => this.onResizeStart());
+        this.resize.resizeMove.subscribe((v) => this.onResizeMove(v));
+        this.resize.resizeEnd.subscribe(() => this.onResizeEnd());
         // Keep the hosted directives in sync with per-item state: static items and
         // items explicitly marked non-draggable/non-resizable stop reacting entirely.
         effect(() => {
             const id = this.itemId();
             const item = id ? this.service.items().find((x) => x.id === id) : undefined;
-            this.drag.disabled = !item || !this.service.isItemDraggable(item);
-            this.resize.disabled = !item || !this.service.isItemResizable(item);
+            this.drag.disabled.set(!item || !this.service.isItemDraggable(item));
+            this.resize.disabled.set(!item || !this.service.isItemResizable(item));
             if (item)
                 this.applySizeConstraints(item.config);
         });
@@ -939,10 +941,10 @@ class NgxGridItemComponent {
         const rows = Math.max(1, config.h);
         const colPx = cellPx.width / cols || 1;
         const rowPx = cellPx.height / rows || 1;
-        this.resize.minWidth = (config.minW ?? 1) * colPx;
-        this.resize.minHeight = (config.minH ?? 1) * rowPx;
-        this.resize.maxWidth = config.maxW ? config.maxW * colPx : Infinity;
-        this.resize.maxHeight = config.maxH ? config.maxH * rowPx : Infinity;
+        this.resize.minWidth.set((config.minW ?? 1) * colPx);
+        this.resize.minHeight.set((config.minH ?? 1) * rowPx);
+        this.resize.maxWidth.set(config.maxW ? config.maxW * colPx : Infinity);
+        this.resize.maxHeight.set(config.maxH ? config.maxH * rowPx : Infinity);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxGridItemComponent, isStandalone: true, selector: "ngx-grid-item", inputs: { itemId: { classPropertyName: "itemId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "style.position": "\"absolute\"", "style.display": "\"block\"", "style.boxSizing": "\"border-box\"", "style.transition": "transitionStyle()", "class.ngx-grid-item--dragging": "dragging()", "class.ngx-grid-item--resizing": "resizing()", "class.ngx-grid-item--static": "config().static", "class.with-resize-handler": "resizable()", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-grabbed": "dragging()", "attr.data-grid-id": "itemId()" } }, hostDirectives: [{ directive: i1.NgxDraggable, inputs: ["dragHandle", "dragHandle", "lockAxis", "lockAxis"] }, { directive: i1.NgxResizable }], ngImport: i0, template: `