@apexara/ng-components 1.0.0 → 1.0.2-test.1

package/fesm2022/apexara-ng-components-snackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-snackbar.mjs","sources":["../../../../projects/apexara/ng-components/snackbar/src/snackbar.component.ts","../../../../projects/apexara/ng-components/snackbar/src/snackbar.component.html","../../../../projects/apexara/ng-components/snackbar/src/snackbar.service.ts","../../../../projects/apexara/ng-components/snackbar/apexara-ng-components-snackbar.ts"],"sourcesContent":["import { trigger, state, style, transition, animate } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';\n\nimport { IpiImageComponent } from '@apexara/ng-components/image';\n\nexport enum VerticalPosition {\n  Bottom,\n  Top,\n}\n\nexport enum HorizontalPosition {\n  Left,\n  Center,\n  Right,\n}\n\nexport interface IpiSnackbarOptions {\n  title?: string;\n  icon?: string;\n  error: boolean;\n  shouldClose: boolean;\n  duration: number;\n  animationDuration: number;\n  position: SnackbarPosition;\n  backgroundColor: string;\n  errorBackgroundColor: string;\n  progressColor: string;\n  placeholderTextColor: string;\n  messageTextColor: string;\n  xIconColor: string;\n}\n\nexport interface SnackbarPosition {\n  horizontalPosition?: HorizontalPosition;\n  verticalPosition?: VerticalPosition;\n}\n\n@Component({\n  selector: 'ipi-snackbar',\n  templateUrl: './snackbar.component.html',\n  styleUrls: ['./snackbar.component.css'],\n  imports: [\n    NgClass,\n    IpiImageComponent,\n  ],\n  animations: [\n    trigger('snackbarState', [\n      state('open', style({\n        opacity: 1,\n        transform: 'translateX(0)',\n        maxHeight: '*'\n      })),\n      state('closing', style({\n        opacity: 0,\n        transform: 'translateX(50px)',\n        height: '0px',\n        margin: 0,\n        padding: 0,\n      })),\n      transition('open => closing', [\n        animate('{{duration}}s ease-in', style({ opacity: 0, transform: 'translateX(50px)' })),\n        animate('{{duration}}s ease-in', style({ height: '0px', margin: 0, padding: 0 })),\n      ]),\n    ]),\n  ],\n})\n\nexport class IpiSnackbarComponent {\n\n  @ViewChild('container') container!: ElementRef<HTMLDivElement>;\n\n  @Input() message!: String;\n  @Input() options!: IpiSnackbarOptions;\n\n  @Input() positionOptions!: SnackbarPosition;\n\n  @Input() closing: boolean = false;\n\n  @Output() closed = new EventEmitter<void>();\n\n  public ngAfterViewInit(): void {\n    if (!this.container) {\n      return;\n    }\n\n    this.container.nativeElement.style.height = this.container.nativeElement.scrollHeight + 'px';\n  }\n\n  public getAnimationParams() {\n    return { duration: this.options?.animationDuration ? this.options.animationDuration / 3 : 1 };\n  }\n\n}\n","<div\n    #container\n    class=\"custom-snackbar\"\n    [class.error]=\"options.error\"\n    [style.ipi-snackbar-animation-duration]=\"options.animationDuration + 's'\"\n    [@snackbarState]=\"{ value: closing ? 'closing' : 'open', params: getAnimationParams() }\">\n\n    <div class=\"placeholder-wrapper\">\n        @if (options.icon) {\n            <ipi-img [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'Snackbar prefix icon'\"></ipi-img>\n        }\n\n        <div class=\"placeholder\">{{ options.title ?? (options.error ? 'Error' : 'Success') }}</div>\n\n        <div class=\"x-icon\" (click)=\"closed.emit()\"></div>\n    </div>\n\n    <div class=\"message-wrapper\" [ngClass]=\"{ 'no-padding' : !options.icon }\">\n        <div class=\"message\">{{ message }}</div>\n    </div>\n\n    @if (options.shouldClose) {\n        <div class=\"progress\" [style.animation-duration]=\"(options.duration + 2 * options.animationDuration) + 's'\"></div>\n    }\n</div>\n","import { Injectable, ComponentRef, ApplicationRef, EmbeddedViewRef, createComponent } from '@angular/core';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\nimport { IpiSnackbarComponent, IpiSnackbarOptions, SnackbarPosition, VerticalPosition, HorizontalPosition } from './snackbar.component';\n\ntype SnackbarComponentRef = ComponentRef<IpiSnackbarComponent | unknown>;\n\ninterface SnackbarElement {\n  containerId: string;\n  ref: SnackbarComponentRef;\n  options: IpiSnackbarOptions;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\n\nexport class IpiSnackbarService {\n\n  constructor(\n    private appRef: ApplicationRef,\n    private overlayService: OverlayService) { }\n\n  private maxSnackbars = 5;\n\n  private snackbarContainerMap: Record<string, HTMLElement> = { };\n\n  private defaultSnackbarOptions: IpiSnackbarOptions = {\n    error: false,\n    shouldClose: true,\n    duration: 5,\n    animationDuration: 1,\n    position: {\n      verticalPosition: VerticalPosition.Bottom,\n      horizontalPosition: HorizontalPosition.Center,\n    },\n    backgroundColor: '#14BD6C',\n    errorBackgroundColor: '#F96138',\n    progressColor: '#FFFFFF',\n    placeholderTextColor: '#FFFFFF',\n    messageTextColor: '#FFFFFF',\n    xIconColor: '#FFFFFF',\n  };\n\n  private snackbarsArray: SnackbarElement[] = [ ];\n\n  public open(message?: string, options?: Partial<IpiSnackbarOptions>, component?: unknown, data?: Record<string, unknown>): void {\n    const snackbarOptions: IpiSnackbarOptions = {\n      ...this.defaultSnackbarOptions,\n      ...options,\n    };\n\n    const snackbarContainerRef = this.createSnackbarContainer(snackbarOptions.position);\n\n    const snackbarRef = this.createComponent(\n      component ? component : IpiSnackbarComponent,\n      snackbarOptions,\n      snackbarContainerRef,\n      component ? data : undefined,\n    );\n\n    if (!snackbarRef) {\n      return;\n    }\n\n    if (message && !component) {\n      snackbarRef.instance.message = message;\n    }\n\n    this.closeIfMaxSnackbar();\n\n    this.snackbarsArray.push({\n      containerId: this.generateSnackbarContainerId(snackbarOptions.position),\n      ref: snackbarRef,\n      options: snackbarOptions,\n    });\n\n    this.subscribeToClosingEvents(snackbarRef);\n  }\n\n  public setMaxSnackbars(length: number): void {\n    this.maxSnackbars = length;\n  }\n\n  public updateDefaultOptions(options: Partial<IpiSnackbarOptions>): void {\n    this.defaultSnackbarOptions = { ...this.defaultSnackbarOptions, ...options };\n  }\n\n  private createSnackbarContainer(position: SnackbarPosition): HTMLElement {\n    const id = this.generateSnackbarContainerId(position);\n\n    if (this.snackbarContainerMap[id]) {\n      return this.snackbarContainerMap[id];\n    }\n\n    this.snackbarContainerMap[id] = document.createElement('div');\n\n    this.applySnackbarContainerStyles(this.snackbarContainerMap[id], position);\n\n    this.overlayService.appendToOverlay(this.snackbarContainerMap[id], false);\n\n    return this.snackbarContainerMap[id];\n  }\n\n  private createComponent(component: any, options: IpiSnackbarOptions, container: HTMLElement, data?: Record<string, unknown>): ComponentRef<any> | void {\n    const componentRef = createComponent(component, { environmentInjector: this.appRef.injector });\n\n    if (!componentRef.instance) {\n      return;\n    }\n\n    (componentRef.instance as any).data = data;\n    (componentRef.instance as any).options = options;\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const snackbarElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;\n\n    this.applySnackbarStyles(snackbarElement, options);\n\n    container.appendChild(snackbarElement);\n\n    if (options.shouldClose) {\n      setTimeout(() => {\n        const closeIndex = this.findSnackbarElementIndexFromRef(componentRef);\n\n        if (closeIndex === undefined) {\n          return;\n        }\n\n        this.close(closeIndex);\n      }, (2 * options.animationDuration + options.duration) * 1000);\n    }\n\n    return componentRef;\n  }\n\n  private applySnackbarStyles(snackbarElement: HTMLElement, options: IpiSnackbarOptions): void {\n    const styles = {\n      '--ipi-snackbar-background-color': options.backgroundColor,\n      '--ipi-snackbar-placeholder-text-color': options.placeholderTextColor,\n      '--ipi-snackbar-message-text-color': options.messageTextColor,\n      '--ipi-snackbar-progress-color': options.progressColor,\n      '--ipi-snackbar-x-icon-color': options.xIconColor,\n      '--ipi-snackbar-animation-duration': options.animationDuration ? `${options.animationDuration}s` : undefined\n    };\n  \n    for (const [cssVar, value] of Object.entries(styles)) {\n      if (value) {\n        snackbarElement.style.setProperty(cssVar, value);\n      }\n    }\n\n    const position = options.position ? options.position : this.defaultSnackbarOptions.position!;\n\n    snackbarElement.querySelector('div:first-child')!.classList.add(`horizontal-${position.horizontalPosition}`, `vertical-${position.verticalPosition}`);\n  }\n\n  private closeIfMaxSnackbar(): void {\n    if (this.snackbarsArray.length === this.maxSnackbars) {\n      this.close(0);\n    }\n  }\n\n  private subscribeToClosingEvents(snackbarRef: SnackbarComponentRef): void {\n    (snackbarRef.instance as any).closed.subscribe(() => {\n      const closeIndex = this.findSnackbarElementIndexFromRef(snackbarRef);\n\n      this.close(closeIndex);\n    });\n\n    snackbarRef.onDestroy(() => {\n      (snackbarRef.instance as any).closed.unsubscribe();\n    });\n  }\n\n  private applySnackbarContainerStyles(container: HTMLElement, position: SnackbarPosition): void {\n    Object.assign(container.style, {\n      position: 'fixed',\n      zIndex: '1000',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-end',\n    });\n\n    Object.assign(container.style, {\n      left: '50%',\n      bottom: '0',\n      transform: 'translateX(-50%)',\n    });\n\n    switch (position.horizontalPosition) {\n      case HorizontalPosition.Left:\n        Object.assign(container.style, {\n          left: '0',\n          right: '',\n          transform: 'translateX(0)',\n        });\n\n        break;\n\n      case HorizontalPosition.Right:\n        Object.assign(container.style, {\n          right: '0',\n          left: '',\n          transform: 'translateX(0)',\n        });\n    }\n\n    if (position.verticalPosition === VerticalPosition.Top) {\n      container.style.top = '0';\n      container.style.bottom = '';\n    } else {\n      container.style.flexDirection = 'column-reverse';\n    }\n  }\n\n  private close(index: number): void {\n    const snackbar = this.snackbarsArray[index];\n\n    if (!snackbar || !snackbar.ref || !snackbar.ref.instance) {\n      return;\n    }\n\n    if ('closing' in (snackbar.ref.instance as object)) {\n      (snackbar.ref.instance as any).closing = true;\n    }\n\n    this.snackbarsArray.splice(index, 1);\n\n    setTimeout(() => {\n      snackbar.ref.destroy();\n    }, snackbar.options.animationDuration * 1000);\n  }\n\n  private generateSnackbarContainerId(position: SnackbarPosition): string {\n    return `${position.horizontalPosition}_${position.verticalPosition}`;\n  }\n\n  private findSnackbarElementIndexFromRef(ref: SnackbarComponentRef): number {\n    return this.snackbarsArray.findIndex(snackbar => snackbar.ref === ref);\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;IAMY;AAAZ,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAM;AACN,IAAA,gBAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,KAAG;AACL,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,GAAA,EAAA,CAAA,CAAA;IAKhB;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAI;AACJ,IAAA,kBAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAM;AACN,IAAA,kBAAA,CAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAK;AACP,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;MAyDjB,oBAAoB,CAAA;AA9BjC,IAAA,WAAA,GAAA;QAuCW,IAAA,CAAA,OAAO,GAAY,KAAK;AAEvB,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAQ;AAc5C,IAAA;IAZQ,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB;QACF;AAEA,QAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI;IAC9F;IAEO,kBAAkB,GAAA;QACvB,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,GAAG,CAAC,GAAG,CAAC,EAAE;IAC/F;8GAvBW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,2TCpEjC,g9BAyBA,EAAA,MAAA,EAAA,CAAA,q4EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDkBI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,iBAAiB,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAEP;YACV,OAAO,CAAC,eAAe,EAAE;AACvB,gBAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAClB,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,SAAS,EAAE,eAAe;AAC1B,oBAAA,SAAS,EAAE;AACZ,iBAAA,CAAC,CAAC;AACH,gBAAA,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;AACrB,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,SAAS,EAAE,kBAAkB;AAC7B,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,CAAC;AACX,iBAAA,CAAC,CAAC;gBACH,UAAU,CAAC,iBAAiB,EAAE;AAC5B,oBAAA,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC;AACtF,oBAAA,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;iBAClF,CAAC;aACH,CAAC;AACH,SAAA,EAAA,CAAA,CAAA;;2FAGU,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBA9BhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EAGf;wBACP,OAAO;wBACP,iBAAiB;qBAClB,EAAA,UAAA,EACW;wBACV,OAAO,CAAC,eAAe,EAAE;AACvB,4BAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAClB,gCAAA,OAAO,EAAE,CAAC;AACV,gCAAA,SAAS,EAAE,eAAe;AAC1B,gCAAA,SAAS,EAAE;AACZ,6BAAA,CAAC,CAAC;AACH,4BAAA,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;AACrB,gCAAA,OAAO,EAAE,CAAC;AACV,gCAAA,SAAS,EAAE,kBAAkB;AAC7B,gCAAA,MAAM,EAAE,KAAK;AACb,gCAAA,MAAM,EAAE,CAAC;AACT,gCAAA,OAAO,EAAE,CAAC;AACX,6BAAA,CAAC,CAAC;4BACH,UAAU,CAAC,iBAAiB,EAAE;AAC5B,gCAAA,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC;AACtF,gCAAA,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAClF,CAAC;yBACH,CAAC;AACH,qBAAA,EAAA,QAAA,EAAA,g9BAAA,EAAA,MAAA,EAAA,CAAA,q4EAAA,CAAA,EAAA;;sBAKA,SAAS;uBAAC,WAAW;;sBAErB;;sBACA;;sBAEA;;sBAEA;;sBAEA;;;ME7DU,kBAAkB,CAAA;IAE7B,WAAA,CACU,MAAsB,EACtB,cAA8B,EAAA;QAD9B,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,cAAc,GAAd,cAAc;QAEhB,IAAA,CAAA,YAAY,GAAG,CAAC;QAEhB,IAAA,CAAA,oBAAoB,GAAgC,EAAG;AAEvD,QAAA,IAAA,CAAA,sBAAsB,GAAuB;AACnD,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,iBAAiB,EAAE,CAAC;AACpB,YAAA,QAAQ,EAAE;gBACR,gBAAgB,EAAE,gBAAgB,CAAC,MAAM;gBACzC,kBAAkB,EAAE,kBAAkB,CAAC,MAAM;AAC9C,aAAA;AACD,YAAA,eAAe,EAAE,SAAS;AAC1B,YAAA,oBAAoB,EAAE,SAAS;AAC/B,YAAA,aAAa,EAAE,SAAS;AACxB,YAAA,oBAAoB,EAAE,SAAS;AAC/B,YAAA,gBAAgB,EAAE,SAAS;AAC3B,YAAA,UAAU,EAAE,SAAS;SACtB;QAEO,IAAA,CAAA,cAAc,GAAsB,EAAG;IAvBH;AAyBrC,IAAA,IAAI,CAAC,OAAgB,EAAE,OAAqC,EAAE,SAAmB,EAAE,IAA8B,EAAA;AACtH,QAAA,MAAM,eAAe,GAAuB;YAC1C,GAAG,IAAI,CAAC,sBAAsB;AAC9B,YAAA,GAAG,OAAO;SACX;QAED,MAAM,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,CAAC,QAAQ,CAAC;AAEnF,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CACtC,SAAS,GAAG,SAAS,GAAG,oBAAoB,EAC5C,eAAe,EACf,oBAAoB,EACpB,SAAS,GAAG,IAAI,GAAG,SAAS,CAC7B;QAED,IAAI,CAAC,WAAW,EAAE;YAChB;QACF;AAEA,QAAA,IAAI,OAAO,IAAI,CAAC,SAAS,EAAE;AACzB,YAAA,WAAW,CAAC,QAAQ,CAAC,OAAO,GAAG,OAAO;QACxC;QAEA,IAAI,CAAC,kBAAkB,EAAE;AAEzB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,WAAW,EAAE,IAAI,CAAC,2BAA2B,CAAC,eAAe,CAAC,QAAQ,CAAC;AACvE,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,OAAO,EAAE,eAAe;AACzB,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC;IAC5C;AAEO,IAAA,eAAe,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM;IAC5B;AAEO,IAAA,oBAAoB,CAAC,OAAoC,EAAA;AAC9D,QAAA,IAAI,CAAC,sBAAsB,GAAG,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAAG,OAAO,EAAE;IAC9E;AAEQ,IAAA,uBAAuB,CAAC,QAA0B,EAAA;QACxD,MAAM,EAAE,GAAG,IAAI,CAAC,2BAA2B,CAAC,QAAQ,CAAC;AAErD,QAAA,IAAI,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAE;AACjC,YAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC;QACtC;AAEA,QAAA,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAE7D,QAAA,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;AAE1E,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC;AAEzE,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC;IACtC;AAEQ,IAAA,eAAe,CAAC,SAAc,EAAE,OAA2B,EAAE,SAAsB,EAAE,IAA8B,EAAA;AACzH,QAAA,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;AAE9F,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;YAC1B;QACF;AAEC,QAAA,YAAY,CAAC,QAAgB,CAAC,IAAI,GAAG,IAAI;AACzC,QAAA,YAAY,CAAC,QAAgB,CAAC,OAAO,GAAG,OAAO;QAEhD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC;QAE7C,MAAM,eAAe,GAAI,YAAY,CAAC,QAAiC,CAAC,SAAS,CAAC,CAAC,CAAgB;AAEnG,QAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;AAElD,QAAA,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC;AAEtC,QAAA,IAAI,OAAO,CAAC,WAAW,EAAE;YACvB,UAAU,CAAC,MAAK;gBACd,MAAM,UAAU,GAAG,IAAI,CAAC,+BAA+B,CAAC,YAAY,CAAC;AAErE,gBAAA,IAAI,UAAU,KAAK,SAAS,EAAE;oBAC5B;gBACF;AAEA,gBAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;AACxB,YAAA,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC;QAC/D;AAEA,QAAA,OAAO,YAAY;IACrB;IAEQ,mBAAmB,CAAC,eAA4B,EAAE,OAA2B,EAAA;AACnF,QAAA,MAAM,MAAM,GAAG;YACb,iCAAiC,EAAE,OAAO,CAAC,eAAe;YAC1D,uCAAuC,EAAE,OAAO,CAAC,oBAAoB;YACrE,mCAAmC,EAAE,OAAO,CAAC,gBAAgB;YAC7D,+BAA+B,EAAE,OAAO,CAAC,aAAa;YACtD,6BAA6B,EAAE,OAAO,CAAC,UAAU;AACjD,YAAA,mCAAmC,EAAE,OAAO,CAAC,iBAAiB,GAAG,CAAA,EAAG,OAAO,CAAC,iBAAiB,CAAA,CAAA,CAAG,GAAG;SACpG;AAED,QAAA,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACpD,IAAI,KAAK,EAAE;gBACT,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;YAClD;QACF;AAEA,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAS;QAE5F,eAAe,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,WAAA,EAAc,QAAQ,CAAC,kBAAkB,EAAE,EAAE,CAAA,SAAA,EAAY,QAAQ,CAAC,gBAAgB,CAAA,CAAE,CAAC;IACvJ;IAEQ,kBAAkB,GAAA;QACxB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;AACpD,YAAA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACf;IACF;AAEQ,IAAA,wBAAwB,CAAC,WAAiC,EAAA;QAC/D,WAAW,CAAC,QAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,MAAK;YAClD,MAAM,UAAU,GAAG,IAAI,CAAC,+BAA+B,CAAC,WAAW,CAAC;AAEpE,YAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;AACxB,QAAA,CAAC,CAAC;AAEF,QAAA,WAAW,CAAC,SAAS,CAAC,MAAK;AACxB,YAAA,WAAW,CAAC,QAAgB,CAAC,MAAM,CAAC,WAAW,EAAE;AACpD,QAAA,CAAC,CAAC;IACJ;IAEQ,4BAA4B,CAAC,SAAsB,EAAE,QAA0B,EAAA;AACrF,QAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;AAC7B,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,CAAC;AAEF,QAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;AAC7B,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,SAAS,EAAE,kBAAkB;AAC9B,SAAA,CAAC;AAEF,QAAA,QAAQ,QAAQ,CAAC,kBAAkB;YACjC,KAAK,kBAAkB,CAAC,IAAI;AAC1B,gBAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;AAC7B,oBAAA,IAAI,EAAE,GAAG;AACT,oBAAA,KAAK,EAAE,EAAE;AACT,oBAAA,SAAS,EAAE,eAAe;AAC3B,iBAAA,CAAC;gBAEF;YAEF,KAAK,kBAAkB,CAAC,KAAK;AAC3B,gBAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;AAC7B,oBAAA,KAAK,EAAE,GAAG;AACV,oBAAA,IAAI,EAAE,EAAE;AACR,oBAAA,SAAS,EAAE,eAAe;AAC3B,iBAAA,CAAC;;QAGN,IAAI,QAAQ,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,GAAG,EAAE;AACtD,YAAA,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG;AACzB,YAAA,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;QAC7B;aAAO;AACL,YAAA,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,gBAAgB;QAClD;IACF;AAEQ,IAAA,KAAK,CAAC,KAAa,EAAA;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAE3C,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE;YACxD;QACF;QAEA,IAAI,SAAS,IAAK,QAAQ,CAAC,GAAG,CAAC,QAAmB,EAAE;YACjD,QAAQ,CAAC,GAAG,CAAC,QAAgB,CAAC,OAAO,GAAG,IAAI;QAC/C;QAEA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAEpC,UAAU,CAAC,MAAK;AACd,YAAA,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE;QACxB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC/C;AAEQ,IAAA,2BAA2B,CAAC,QAA0B,EAAA;QAC5D,OAAO,CAAA,EAAG,QAAQ,CAAC,kBAAkB,IAAI,QAAQ,CAAC,gBAAgB,CAAA,CAAE;IACtE;AAEQ,IAAA,+BAA+B,CAAC,GAAyB,EAAA;AAC/D,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,IAAI,QAAQ,CAAC,GAAG,KAAK,GAAG,CAAC;IACxE;8GAhOW,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cAHjB,MAAM,EAAA,CAAA,CAAA;;2FAGP,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"apexara-ng-components-snackbar.mjs","sources":["../../../../projects/apexara/ng-components/snackbar/src/snackbar.component.ts","../../../../projects/apexara/ng-components/snackbar/src/snackbar.component.html","../../../../projects/apexara/ng-components/snackbar/src/snackbar.service.ts","../../../../projects/apexara/ng-components/snackbar/apexara-ng-components-snackbar.ts"],"sourcesContent":["import { trigger, state, style, transition, animate } from '@angular/animations';\nimport { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport enum VerticalPosition {\n  Bottom,\n  Top,\n}\n\nexport enum HorizontalPosition {\n  Left,\n  Center,\n  Right,\n}\n\nexport interface ApexSnackbarOptions {\n  title?: string;\n  icon?: string;\n  error: boolean;\n  shouldClose: boolean;\n  duration: number;\n  animationDuration: number;\n  position: SnackbarPosition;\n  backgroundColor: string;\n  errorBackgroundColor: string;\n  progressColor: string;\n  placeholderTextColor: string;\n  messageTextColor: string;\n  xIconColor: string;\n}\n\nexport interface SnackbarPosition {\n  horizontalPosition?: HorizontalPosition;\n  verticalPosition?: VerticalPosition;\n}\n\n@Component({\n  selector: 'apex-snackbar',\n  templateUrl: './snackbar.component.html',\n  styleUrls: ['./snackbar.component.css'],\n  imports: [\n    NgClass,\n    ApexImageComponent,\n  ],\n  animations: [\n    trigger('snackbarState', [\n      state('open', style({\n        opacity: 1,\n        transform: 'translateX(0)',\n        maxHeight: '*'\n      })),\n      state('closing', style({\n        opacity: 0,\n        transform: 'translateX(50px)',\n        height: '0px',\n        margin: 0,\n        padding: 0,\n      })),\n      transition('open => closing', [\n        animate('{{duration}}s ease-in', style({ opacity: 0, transform: 'translateX(50px)' })),\n        animate('{{duration}}s ease-in', style({ height: '0px', margin: 0, padding: 0 })),\n      ]),\n    ]),\n  ],\n})\n\nexport class ApexSnackbarComponent {\n\n  @ViewChild('container') container!: ElementRef<HTMLDivElement>;\n\n  @Input() message!: String;\n  @Input() options!: ApexSnackbarOptions;\n\n  @Input() positionOptions!: SnackbarPosition;\n\n  @Input() closing: boolean = false;\n\n  @Output() closed = new EventEmitter<void>();\n\n  public ngAfterViewInit(): void {\n    if (!this.container) {\n      return;\n    }\n\n    this.container.nativeElement.style.height = this.container.nativeElement.scrollHeight + 'px';\n  }\n\n  public getAnimationParams() {\n    return { duration: this.options?.animationDuration ? this.options.animationDuration / 3 : 1 };\n  }\n\n}\n","<div\n    #container\n    class=\"custom-snackbar\"\n    [class.error]=\"options.error\"\n    [style.apex-snackbar-animation-duration]=\"options.animationDuration + 's'\"\n    [@snackbarState]=\"{ value: closing ? 'closing' : 'open', params: getAnimationParams() }\">\n\n    <div class=\"placeholder-wrapper\">\n        @if (options.icon) {\n            <apex-img [src]=\"'assets/img/' + options.icon\" [ariaLabel]=\"'Snackbar prefix icon'\"></apex-img>\n        }\n\n        <div class=\"placeholder\">{{ options.title ?? (options.error ? 'Error' : 'Success') }}</div>\n\n        <div class=\"x-icon\" (click)=\"closed.emit()\"></div>\n    </div>\n\n    <div class=\"message-wrapper\" [ngClass]=\"{ 'no-padding' : !options.icon }\">\n        <div class=\"message\">{{ message }}</div>\n    </div>\n\n    @if (options.shouldClose) {\n        <div class=\"progress\" [style.animation-duration]=\"(options.duration + 2 * options.animationDuration) + 's'\"></div>\n    }\n</div>\n","import { Injectable, ComponentRef, ApplicationRef, EmbeddedViewRef, createComponent } from '@angular/core';\n\nimport { OverlayService } from '@apexara/ng-components/services';\n\nimport { ApexSnackbarComponent, ApexSnackbarOptions, SnackbarPosition, VerticalPosition, HorizontalPosition } from './snackbar.component';\n\ntype SnackbarComponentRef = ComponentRef<ApexSnackbarComponent | unknown>;\n\ninterface SnackbarElement {\n  containerId: string;\n  ref: SnackbarComponentRef;\n  options: ApexSnackbarOptions;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\n\nexport class ApexSnackbarService {\n\n  constructor(\n    private appRef: ApplicationRef,\n    private overlayService: OverlayService) { }\n\n  private maxSnackbars = 5;\n\n  private snackbarContainerMap: Record<string, HTMLElement> = { };\n\n  private defaultSnackbarOptions: ApexSnackbarOptions = {\n    error: false,\n    shouldClose: true,\n    duration: 5,\n    animationDuration: 1,\n    position: {\n      verticalPosition: VerticalPosition.Bottom,\n      horizontalPosition: HorizontalPosition.Center,\n    },\n    backgroundColor: '#14BD6C',\n    errorBackgroundColor: '#F96138',\n    progressColor: '#FFFFFF',\n    placeholderTextColor: '#FFFFFF',\n    messageTextColor: '#FFFFFF',\n    xIconColor: '#FFFFFF',\n  };\n\n  private snackbarsArray: SnackbarElement[] = [ ];\n\n  public open(message?: string, options?: Partial<ApexSnackbarOptions>, component?: unknown, data?: Record<string, unknown>): void {\n    const snackbarOptions: ApexSnackbarOptions = {\n      ...this.defaultSnackbarOptions,\n      ...options,\n    };\n\n    const snackbarContainerRef = this.createSnackbarContainer(snackbarOptions.position);\n\n    const snackbarRef = this.createComponent(\n      component ? component : ApexSnackbarComponent,\n      snackbarOptions,\n      snackbarContainerRef,\n      component ? data : undefined,\n    );\n\n    if (!snackbarRef) {\n      return;\n    }\n\n    if (message && !component) {\n      snackbarRef.instance.message = message;\n    }\n\n    this.closeIfMaxSnackbar();\n\n    this.snackbarsArray.push({\n      containerId: this.generateSnackbarContainerId(snackbarOptions.position),\n      ref: snackbarRef,\n      options: snackbarOptions,\n    });\n\n    this.subscribeToClosingEvents(snackbarRef);\n  }\n\n  public setMaxSnackbars(length: number): void {\n    this.maxSnackbars = length;\n  }\n\n  public updateDefaultOptions(options: Partial<ApexSnackbarOptions>): void {\n    this.defaultSnackbarOptions = { ...this.defaultSnackbarOptions, ...options };\n  }\n\n  private createSnackbarContainer(position: SnackbarPosition): HTMLElement {\n    const id = this.generateSnackbarContainerId(position);\n\n    if (this.snackbarContainerMap[id]) {\n      return this.snackbarContainerMap[id];\n    }\n\n    this.snackbarContainerMap[id] = document.createElement('div');\n\n    this.applySnackbarContainerStyles(this.snackbarContainerMap[id], position);\n\n    this.overlayService.appendToOverlay(this.snackbarContainerMap[id], false);\n\n    return this.snackbarContainerMap[id];\n  }\n\n  private createComponent(component: any, options: ApexSnackbarOptions, container: HTMLElement, data?: Record<string, unknown>): ComponentRef<any> | void {\n    const componentRef = createComponent(component, { environmentInjector: this.appRef.injector });\n\n    if (!componentRef.instance) {\n      return;\n    }\n\n    (componentRef.instance as any).data = data;\n    (componentRef.instance as any).options = options;\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const snackbarElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;\n\n    this.applySnackbarStyles(snackbarElement, options);\n\n    container.appendChild(snackbarElement);\n\n    if (options.shouldClose) {\n      setTimeout(() => {\n        const closeIndex = this.findSnackbarElementIndexFromRef(componentRef);\n\n        if (closeIndex === undefined) {\n          return;\n        }\n\n        this.close(closeIndex);\n      }, (2 * options.animationDuration + options.duration) * 1000);\n    }\n\n    return componentRef;\n  }\n\n  private applySnackbarStyles(snackbarElement: HTMLElement, options: ApexSnackbarOptions): void {\n    const styles = {\n      '--apex-snackbar-background-color': options.backgroundColor,\n      '--apex-snackbar-placeholder-text-color': options.placeholderTextColor,\n      '--apex-snackbar-message-text-color': options.messageTextColor,\n      '--apex-snackbar-progress-color': options.progressColor,\n      '--apex-snackbar-x-icon-color': options.xIconColor,\n      '--apex-snackbar-animation-duration': options.animationDuration ? `${options.animationDuration}s` : undefined\n    };\n  \n    for (const [cssVar, value] of Object.entries(styles)) {\n      if (value) {\n        snackbarElement.style.setProperty(cssVar, value);\n      }\n    }\n\n    const position = options.position ? options.position : this.defaultSnackbarOptions.position!;\n\n    snackbarElement.querySelector('div:first-child')!.classList.add(`horizontal-${position.horizontalPosition}`, `vertical-${position.verticalPosition}`);\n  }\n\n  private closeIfMaxSnackbar(): void {\n    if (this.snackbarsArray.length === this.maxSnackbars) {\n      this.close(0);\n    }\n  }\n\n  private subscribeToClosingEvents(snackbarRef: SnackbarComponentRef): void {\n    (snackbarRef.instance as any).closed.subscribe(() => {\n      const closeIndex = this.findSnackbarElementIndexFromRef(snackbarRef);\n\n      this.close(closeIndex);\n    });\n\n    snackbarRef.onDestroy(() => {\n      (snackbarRef.instance as any).closed.unsubscribe();\n    });\n  }\n\n  private applySnackbarContainerStyles(container: HTMLElement, position: SnackbarPosition): void {\n    Object.assign(container.style, {\n      position: 'fixed',\n      zIndex: '1000',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-end',\n    });\n\n    Object.assign(container.style, {\n      left: '50%',\n      bottom: '0',\n      transform: 'translateX(-50%)',\n    });\n\n    switch (position.horizontalPosition) {\n      case HorizontalPosition.Left:\n        Object.assign(container.style, {\n          left: '0',\n          right: '',\n          transform: 'translateX(0)',\n        });\n\n        break;\n\n      case HorizontalPosition.Right:\n        Object.assign(container.style, {\n          right: '0',\n          left: '',\n          transform: 'translateX(0)',\n        });\n    }\n\n    if (position.verticalPosition === VerticalPosition.Top) {\n      container.style.top = '0';\n      container.style.bottom = '';\n    } else {\n      container.style.flexDirection = 'column-reverse';\n    }\n  }\n\n  private close(index: number): void {\n    const snackbar = this.snackbarsArray[index];\n\n    if (!snackbar || !snackbar.ref || !snackbar.ref.instance) {\n      return;\n    }\n\n    if ('closing' in (snackbar.ref.instance as object)) {\n      (snackbar.ref.instance as any).closing = true;\n    }\n\n    this.snackbarsArray.splice(index, 1);\n\n    setTimeout(() => {\n      snackbar.ref.destroy();\n    }, snackbar.options.animationDuration * 1000);\n  }\n\n  private generateSnackbarContainerId(position: SnackbarPosition): string {\n    return `${position.horizontalPosition}_${position.verticalPosition}`;\n  }\n\n  private findSnackbarElementIndexFromRef(ref: SnackbarComponentRef): number {\n    return this.snackbarsArray.findIndex(snackbar => snackbar.ref === ref);\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-table.mjs

@@ -5,30 +5,31 @@ import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/forms';
 import { Validators } from '@angular/forms';
-import { IpiChipComponent } from '@apexara/ng-components/chip';
-import { IpiImageComponent } from '@apexara/ng-components/image';
-import { IpiCheckboxComponent } from '@apexara/ng-components/checkbox';
-import { IpiSelectComponent } from '@apexara/ng-components/select';
+import { ApexChipComponent } from '@apexara/ng-components/chip';
+import { ApexImageComponent } from '@apexara/ng-components/image';
+import { ApexCheckboxComponent } from '@apexara/ng-components/checkbox';
+import { ApexSelectComponent } from '@apexara/ng-components/select';
 import * as i1 from '@apexara/ng-components/services';
 import { MobileOS } from '@apexara/ng-components/services';
-import { TooltipPosition, IpiTooltipDirective } from '@apexara/ng-components/tooltip';
+import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
 
-var IpiTableColumnType;
-(function (IpiTableColumnType) {
-    IpiTableColumnType[IpiTableColumnType["Text"] = 0] = "Text";
-    IpiTableColumnType[IpiTableColumnType["Date"] = 1] = "Date";
-    IpiTableColumnType[IpiTableColumnType["Currency"] = 2] = "Currency";
-    IpiTableColumnType[IpiTableColumnType["Chip"] = 3] = "Chip";
-    IpiTableColumnType[IpiTableColumnType["Number"] = 4] = "Number";
-    IpiTableColumnType[IpiTableColumnType["NumberMath"] = 5] = "NumberMath";
-    IpiTableColumnType[IpiTableColumnType["Actions"] = 6] = "Actions";
-    IpiTableColumnType[IpiTableColumnType["Checkbox"] = 7] = "Checkbox";
-})(IpiTableColumnType || (IpiTableColumnType = {}));
-class IpiTableComponent {
-    constructor(osService, formBuilder, changeDetectorRef) {
+var ApexTableColumnType;
+(function (ApexTableColumnType) {
+    ApexTableColumnType[ApexTableColumnType["Text"] = 0] = "Text";
+    ApexTableColumnType[ApexTableColumnType["Date"] = 1] = "Date";
+    ApexTableColumnType[ApexTableColumnType["Currency"] = 2] = "Currency";
+    ApexTableColumnType[ApexTableColumnType["Chip"] = 3] = "Chip";
+    ApexTableColumnType[ApexTableColumnType["Number"] = 4] = "Number";
+    ApexTableColumnType[ApexTableColumnType["NumberMath"] = 5] = "NumberMath";
+    ApexTableColumnType[ApexTableColumnType["Actions"] = 6] = "Actions";
+    ApexTableColumnType[ApexTableColumnType["Checkbox"] = 7] = "Checkbox";
+})(ApexTableColumnType || (ApexTableColumnType = {}));
+class ApexTableComponent {
+    constructor(osService, formBuilder, changeDetectorRef, scrollBlockService) {
         this.osService = osService;
         this.formBuilder = formBuilder;
         this.changeDetectorRef = changeDetectorRef;
+        this.scrollBlockService = scrollBlockService;
         this.DropdownElement = null;
         // Sorting configuration
         this.sortIndex = 0;
@@ -45,7 +46,8 @@ class IpiTableComponent {
         this.tableChange = new EventEmitter();
         this.itemSize = 42; // Must match CSS table row height
         this.tooltipPosition = TooltipPosition;
-        this.TableColumnType = IpiTableColumnType;
+        this.TableColumnType = ApexTableColumnType;
+        this.currentActiveColumn = null;
         this.isDropdown = false;
     }
     onClick(event) {
@@ -53,6 +55,7 @@ class IpiTableComponent {
         if (event.target !== this.DropdownElement?.nativeElement && event.target) {
             if (this.currentActiveRow) {
                 this.currentActiveRow.isDropdown = false;
+                this.unlockScroll();
             }
             this.changeDetectorRef.detectChanges();
         }
@@ -197,19 +200,19 @@ class IpiTableComponent {
     }
     getCellTemplate(column) {
         switch (column.type) {
-            case IpiTableColumnType.Number:
+            case ApexTableColumnType.Number:
                 return this.numberCellTpl;
-            case IpiTableColumnType.Currency:
+            case ApexTableColumnType.Currency:
                 return this.currencyCellTpl;
-            case IpiTableColumnType.NumberMath:
+            case ApexTableColumnType.NumberMath:
                 return this.numberMathCellTpl;
-            case IpiTableColumnType.Date:
+            case ApexTableColumnType.Date:
                 return this.dateCellTpl;
-            case IpiTableColumnType.Chip:
+            case ApexTableColumnType.Chip:
                 return this.chipCellTpl;
-            case IpiTableColumnType.Checkbox:
+            case ApexTableColumnType.Checkbox:
                 return this.checkboxCellTpl;
-            case IpiTableColumnType.Actions:
+            case ApexTableColumnType.Actions:
                 return this.actionCellTpl;
             default:
                 return this.textCellTpl;
@@ -359,10 +362,11 @@ class IpiTableComponent {
         }
         if (this.currentActiveRow) {
             this.currentActiveRow.isDropdown = false;
+            this.unlockScroll();
         }
         this.changeDetectorRef.detectChanges();
     }
-    async toggleActionDropdown(row, event) {
+    async toggleActionDropdown(row, column, event) {
         // Prevent the event to be processed by the Hostlistener
         event.stopPropagation();
         let actionPos;
@@ -371,6 +375,7 @@ class IpiTableComponent {
         }
         row.isDropdown = !row.isDropdown;
         this.currentActiveRow = row;
+        this.currentActiveColumn = column;
         this.changeDetectorRef.detectChanges();
         for (let i of this.moreActionsList) {
             if (i.nativeElement.classList.contains('opened')) {
@@ -387,11 +392,33 @@ class IpiTableComponent {
             this.DropdownElement.nativeElement.style.transform = left === actionPos.x ? 'translateX(-50%)' : '';
             this.DropdownElement.nativeElement.style.left = left + 'px';
             this.DropdownElement.nativeElement.style.top = `${actionPos.y + actionPos.height}px`;
+            this.lockScroll();
+        }
+        else {
+            this.unlockScroll();
         }
     }
     onViewportScroll() {
-        // Reposition dropdown while body scrolls inside viewport
-        this.onScroll();
+        // Safety net: close dropdown if scroll somehow fires while it's open
+        if (this.currentActiveRow) {
+            this.currentActiveRow.isDropdown = false;
+            this.currentActiveRow = null;
+            this.currentActiveColumn = null;
+            this.unlockScroll();
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+    lockScroll() {
+        this.scrollBlockService.activate();
+        if (this.cdkViewport) {
+            this.cdkViewport.elementRef.nativeElement.style.overflow = 'hidden';
+        }
+    }
+    unlockScroll() {
+        this.scrollBlockService.deactivate();
+        if (this.cdkViewport) {
+            this.cdkViewport.elementRef.nativeElement.style.overflow = '';
+        }
     }
     preprocessData() {
         if (!this.data || this.data.length === 0) {
@@ -582,24 +609,24 @@ class IpiTableComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiTableComponent, deps: [{ token: i1.OSService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiTableComponent, isStandalone: true, selector: "ipi-table", inputs: { data: "data", dataLength: "dataLength", columns: "columns", filter: "filter", serverSide: "serverSide", isLoading: "isLoading", sortIndex: "sortIndex", sortable: "sortable", sortDirection: "sortDirection", pageSize: "pageSize", currentPage: "currentPage", pageable: "pageable", pageSizeOptions: "pageSizeOptions", virtualScroll: "virtualScroll", tableMaxHeight: "tableMaxHeight" }, outputs: { tableChange: "tableChange" }, host: { listeners: { "document:click": "onClick($event)", "document:scroll": "onScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "DropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "textCellTpl", first: true, predicate: ["textCell"], descendants: true, static: true }, { propertyName: "numberCellTpl", first: true, predicate: ["numberCell"], descendants: true, static: true }, { propertyName: "currencyCellTpl", first: true, predicate: ["currencyCell"], descendants: true, static: true }, { propertyName: "numberMathCellTpl", first: true, predicate: ["numberMathCell"], descendants: true, static: true }, { propertyName: "dateCellTpl", first: true, predicate: ["dateCell"], descendants: true, static: true }, { propertyName: "chipCellTpl", first: true, predicate: ["chipCell"], descendants: true, static: true }, { propertyName: "checkboxCellTpl", first: true, predicate: ["checkboxCell"], descendants: true, static: true }, { propertyName: "actionCellTpl", first: true, predicate: ["actionCell"], descendants: true, static: true }, { propertyName: "moreActionsList", predicate: ["moreActionsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading }\">\n    @if (virtualScroll) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: getVirtualViewportHeight() + 'px' }\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                <thead #theadRef>\n                  <tr>\n                    @for (column of columns; track $index) {\n                        <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <div class=\"cell\">\n                                    <span>{{ column.label }}</span>\n\n                                    @if (column.type !== TableColumnType.Actions && sortable) {\n                                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                            </svg>\n                                        </div>\n                                    }\n                                </div>\n                        </th>\n                    }\n                  </tr>\n                </thead>\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of getPageData(); trackBy: trackByIndex\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n              <tr>\n                @for (column of columns; track $index) {\n                    <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                            <div class=\"cell\">\n                                <span>{{ column.label }}</span>\n\n                                @if (column.type !== TableColumnType.Actions && sortable) {\n                                    <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                            <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                        </svg>\n                                    </div>\n                                }\n                            </div>\n                    </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n                @for (row of getPageData(); track $index) { \n                    <tr>\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (filter && filteredData && filteredData.length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && getPageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <ipi-select class=\"table\" [options]=\"pageSizeSelectOptions\"></ipi-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div IpiTooltip (click)=\"action.execute && action.execute(row)\" [ipiTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <ipi-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></ipi-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\" fill=\"#5D6068\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n\n    @if (row.isDropdown) {\n        <ng-container class=\"dropdown-element\" *ngTemplateOutlet=\"multipleActionsDropdown; context: { row, column }\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <ipi-chip [ngClass]=\"getClass(row, column)\"> {{ getChipLabel(row, column) }}</ipi-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <ipi-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></ipi-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <ipi-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></ipi-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--ipi-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--ipi-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}ipi-chip{max-width:100%;--ipi-chip-background-color: #FFF2EF;--ipi-chip-color: #F96138}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--ipi-checkbox-disabled-opacity: 1}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions ipi-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--ipi-chip-background-color: var(--ipi-table-chip-background-color);--ipi-chip-color: var(--ipi-table-chip-color)}.cell.chip .secondary{--ipi-chip-background-color: var(--ipi-table-chip-background-color-secondary);--ipi-chip-color: var(--ipi-table-chip-color-secondary)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--ipi-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--ipi-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--ipi-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row ipi-img{width:20px;height:20px}.dropdown-row ipi-img path{fill:var(--ipi-table-dropdown-action-icon-fill, #5D6068);stroke:var(--ipi-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover ipi-img path{fill:var(--ipi-table-action-icon-hover-fill, #F96138);stroke:var(--ipi-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--ipi-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--ipi-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper ipi-img path{fill:var(--ipi-table-action-icon-fill, #5D6068);stroke:var(--ipi-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover ipi-img path{fill:var(--ipi-table-action-icon-hover-fill, #F96138);stroke:var(--ipi-table-action-icon-hover-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--ipi-table-action-more-icon-fill, #F96138);stroke:var(--ipi-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper ipi-img.secondary path{fill:var(--ipi-table-action-secondary-icon-fill, #F96138);stroke:var(--ipi-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover ipi-img.secondary path{fill:var(--ipi-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--ipi-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--ipi-table-page-picker-text-color, #FFF);background:var(--ipi-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IpiChipComponent, selector: "ipi-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }, { kind: "component", type: IpiSelectComponent, selector: "ipi-select", inputs: ["options"], outputs: ["selectChange", "helperTextChange"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }, { kind: "component", type: IpiCheckboxComponent, selector: "ipi-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexTableComponent, deps: [{ token: i1.OSService }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.ScrollBlockService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexTableComponent, isStandalone: true, selector: "apex-table", inputs: { data: "data", dataLength: "dataLength", columns: "columns", filter: "filter", serverSide: "serverSide", isLoading: "isLoading", sortIndex: "sortIndex", sortable: "sortable", sortDirection: "sortDirection", pageSize: "pageSize", currentPage: "currentPage", pageable: "pageable", pageSizeOptions: "pageSizeOptions", virtualScroll: "virtualScroll", tableMaxHeight: "tableMaxHeight" }, outputs: { tableChange: "tableChange" }, host: { listeners: { "document:click": "onClick($event)", "document:scroll": "onScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "DropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "textCellTpl", first: true, predicate: ["textCell"], descendants: true, static: true }, { propertyName: "numberCellTpl", first: true, predicate: ["numberCell"], descendants: true, static: true }, { propertyName: "currencyCellTpl", first: true, predicate: ["currencyCell"], descendants: true, static: true }, { propertyName: "numberMathCellTpl", first: true, predicate: ["numberMathCell"], descendants: true, static: true }, { propertyName: "dateCellTpl", first: true, predicate: ["dateCell"], descendants: true, static: true }, { propertyName: "chipCellTpl", first: true, predicate: ["chipCell"], descendants: true, static: true }, { propertyName: "checkboxCellTpl", first: true, predicate: ["checkboxCell"], descendants: true, static: true }, { propertyName: "actionCellTpl", first: true, predicate: ["actionCell"], descendants: true, static: true }, { propertyName: "moreActionsList", predicate: ["moreActionsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading }\">\n    @if (virtualScroll) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: getVirtualViewportHeight() + 'px' }\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                <thead #theadRef>\n                  <tr>\n                    @for (column of columns; track $index) {\n                        <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <div class=\"cell\">\n                                    <span>{{ column.label }}</span>\n\n                                    @if (column.type !== TableColumnType.Actions && sortable) {\n                                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                            </svg>\n                                        </div>\n                                    }\n                                </div>\n                        </th>\n                    }\n                  </tr>\n                </thead>\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of getPageData(); trackBy: trackByIndex\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n              <tr>\n                @for (column of columns; track $index) {\n                    <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                            <div class=\"cell\">\n                                <span>{{ column.label }}</span>\n\n                                @if (column.type !== TableColumnType.Actions && sortable) {\n                                    <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                            <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                        </svg>\n                                    </div>\n                                }\n                            </div>\n                    </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n                @for (row of getPageData(); track $index) { \n                    <tr>\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow?.isDropdown && currentActiveColumn) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow, column: currentActiveColumn }\"></ng-container>\n    }\n\n    @if (filter && filteredData && filteredData.length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && getPageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip (click)=\"action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\" fill=\"#5D6068\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #FFF2EF;--apex-chip-color: #F96138}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var(--apex-table-chip-background-color-secondary);--apex-chip-color: var(--apex-table-chip-color-secondary)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--apex-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5D6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5D6068);stroke:var(--apex-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #F96138);stroke:var(--apex-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #F96138);stroke:var(--apex-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #FFF);background:var(--apex-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "ariaLabel"] }, { kind: "component", type: ApexSelectComponent, selector: "apex-select", inputs: ["options"], outputs: ["selectChange", "helperTextChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ipi-table', imports: [
+            args: [{ standalone: true, selector: 'apex-table', imports: [
                         NgStyle,
                         NgClass,
                         DecimalPipe,
                         NgTemplateOutlet,
-                        IpiChipComponent,
-                        IpiImageComponent,
-                        IpiSelectComponent,
-                        IpiTooltipDirective,
-                        IpiCheckboxComponent,
+                        ApexChipComponent,
+                        ApexImageComponent,
+                        ApexSelectComponent,
+                        ApexTooltipDirective,
+                        ApexCheckboxComponent,
                         ScrollingModule,
-                    ], template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading }\">\n    @if (virtualScroll) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: getVirtualViewportHeight() + 'px' }\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                <thead #theadRef>\n                  <tr>\n                    @for (column of columns; track $index) {\n                        <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <div class=\"cell\">\n                                    <span>{{ column.label }}</span>\n\n                                    @if (column.type !== TableColumnType.Actions && sortable) {\n                                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                            </svg>\n                                        </div>\n                                    }\n                                </div>\n                        </th>\n                    }\n                  </tr>\n                </thead>\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of getPageData(); trackBy: trackByIndex\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n              <tr>\n                @for (column of columns; track $index) {\n                    <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                            <div class=\"cell\">\n                                <span>{{ column.label }}</span>\n\n                                @if (column.type !== TableColumnType.Actions && sortable) {\n                                    <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                            <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                        </svg>\n                                    </div>\n                                }\n                            </div>\n                    </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n                @for (row of getPageData(); track $index) { \n                    <tr>\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (filter && filteredData && filteredData.length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && getPageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <ipi-select class=\"table\" [options]=\"pageSizeSelectOptions\"></ipi-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div IpiTooltip (click)=\"action.execute && action.execute(row)\" [ipiTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <ipi-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></ipi-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\" fill=\"#5D6068\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n\n    @if (row.isDropdown) {\n        <ng-container class=\"dropdown-element\" *ngTemplateOutlet=\"multipleActionsDropdown; context: { row, column }\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <ipi-chip [ngClass]=\"getClass(row, column)\"> {{ getChipLabel(row, column) }}</ipi-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <ipi-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></ipi-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <ipi-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></ipi-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--ipi-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--ipi-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}ipi-chip{max-width:100%;--ipi-chip-background-color: #FFF2EF;--ipi-chip-color: #F96138}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--ipi-checkbox-disabled-opacity: 1}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions ipi-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--ipi-chip-background-color: var(--ipi-table-chip-background-color);--ipi-chip-color: var(--ipi-table-chip-color)}.cell.chip .secondary{--ipi-chip-background-color: var(--ipi-table-chip-background-color-secondary);--ipi-chip-color: var(--ipi-table-chip-color-secondary)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--ipi-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--ipi-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--ipi-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row ipi-img{width:20px;height:20px}.dropdown-row ipi-img path{fill:var(--ipi-table-dropdown-action-icon-fill, #5D6068);stroke:var(--ipi-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover ipi-img path{fill:var(--ipi-table-action-icon-hover-fill, #F96138);stroke:var(--ipi-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--ipi-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--ipi-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper ipi-img path{fill:var(--ipi-table-action-icon-fill, #5D6068);stroke:var(--ipi-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover ipi-img path{fill:var(--ipi-table-action-icon-hover-fill, #F96138);stroke:var(--ipi-table-action-icon-hover-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--ipi-table-action-more-icon-fill, #F96138);stroke:var(--ipi-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper ipi-img.secondary path{fill:var(--ipi-table-action-secondary-icon-fill, #F96138);stroke:var(--ipi-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover ipi-img.secondary path{fill:var(--ipi-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--ipi-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--ipi-table-page-picker-text-color, #FFF);background:var(--ipi-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.OSService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { theadRef: [{
+                    ], template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading }\">\n    @if (virtualScroll) {\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: getVirtualViewportHeight() + 'px' }\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                <thead #theadRef>\n                  <tr>\n                    @for (column of columns; track $index) {\n                        <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <div class=\"cell\">\n                                    <span>{{ column.label }}</span>\n\n                                    @if (column.type !== TableColumnType.Actions && sortable) {\n                                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                            </svg>\n                                        </div>\n                                    }\n                                </div>\n                        </th>\n                    }\n                  </tr>\n                </thead>\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of getPageData(); trackBy: trackByIndex\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n              <tr>\n                @for (column of columns; track $index) {\n                    <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                            <div class=\"cell\">\n                                <span>{{ column.label }}</span>\n\n                                @if (column.type !== TableColumnType.Actions && sortable) {\n                                    <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                            <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                                        </svg>\n                                    </div>\n                                }\n                            </div>\n                    </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n                @for (row of getPageData(); track $index) { \n                    <tr>\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow?.isDropdown && currentActiveColumn) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow, column: currentActiveColumn }\"></ng-container>\n    }\n\n    @if (filter && filteredData && filteredData.length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && getPageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip (click)=\"action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\" fill=\"#5D6068\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [ariaLabel]=\"'Action icon for ' + action.label\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #FFF2EF;--apex-chip-color: #F96138}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var(--apex-table-chip-background-color-secondary);--apex-chip-color: var(--apex-table-chip-color-secondary)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--apex-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5D6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5D6068);stroke:var(--apex-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #F96138);stroke:var(--apex-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #F96138);stroke:var(--apex-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #FFF);background:var(--apex-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.OSService }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.ScrollBlockService }], propDecorators: { theadRef: [{
                 type: ViewChild,
                 args: ['theadRef']
             }], moreActionsList: [{
@@ -682,5 +709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { IpiTableColumnType, IpiTableComponent };
+export { ApexTableColumnType, ApexTableComponent };
 //# sourceMappingURL=apexara-ng-components-table.mjs.map