@bootkit/ng0 0.0.0-alpha.15 → 0.0.0-alpha.17

package/common/index.d.ts

@@ -38,9 +38,9 @@ declare function flipPlacement(placement: Placement): "start" | "end" | "top" |
  */
 declare function formatString(str: string, ...args: any[]): string;
 
-/** Base class of all menu items  */
+/** Menu item  */
 interface MenuItem {
-    type: 'group' | 'text' | 'divider';
+    type?: string;
     id?: any;
     disabled?: boolean;
     active?: boolean;

package/components/table/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, OnInit, AfterContentInit, OnDestroy, QueryList, DestroyRef } from '@angular/core';
+import { OnInit, TemplateRef, AfterContentInit, OnDestroy, QueryList, DestroyRef } from '@angular/core';
 import { formatString } from '@bootkit/ng0/common';
 import { LocalizationService, TableComponentPagingFormatter } from '@bootkit/ng0/localization';
 import { DataSourceLike, DataResult, DataRequest, DataSource } from '@bootkit/ng0/data';
@@ -50,7 +50,7 @@ interface TablePagingOptions {
  * This can be a primitive type like 'number', 'currency', 'date', 'time',
  * or an object with specific formatting options.
  */
-type TableCellType = 'number' | 'currency' | 'date' | 'time' | {
+type TableCellType = 'text' | 'number' | 'currency' | 'date' | 'time' | {
     /** Enum formatting options */
     enum?: {
         /** The name of the enum to use for translation */
@@ -65,27 +65,32 @@ type TableCellType = 'number' | 'currency' | 'date' | 'time' | {
     currency?: {};
 };
 
-type DataTableColumnBadgeValueType = string | number | boolean;
-declare class TableColumnDirective {
-    field?: string;
-    title?: string;
+declare class TableColumnDirective implements OnInit {
+    field: _angular_core.InputSignal<string | undefined>;
+    title: _angular_core.InputSignal<string | undefined>;
     emptyCellText: _angular_core.InputSignal<string | undefined>;
     /**
      * Type of the table cell.
      */
-    type: _angular_core.InputSignal<TableCellType | undefined>;
-    template?: TemplateRef<any>;
-    cellClass?: string | string[] | {
+    type: _angular_core.InputSignal<TableCellType>;
+    cellClass: _angular_core.InputSignal<string | {
         [klass: string]: any;
-    } | null | undefined;
-    shrink: boolean;
-    bold: boolean;
-    filterable: boolean;
-    filterValue?: string;
-    filterField?: string;
+    } | string[] | null | undefined>;
+    /** Deprecated */
+    bold: _angular_core.InputSignal<boolean>;
+    shrink: _angular_core.InputSignal<boolean>;
+    filterable: _angular_core.InputSignal<boolean>;
+    filterValue: _angular_core.ModelSignal<any>;
+    filterField: _angular_core.InputSignal<string | undefined>;
+    filterOperator: _angular_core.ModelSignal<string | undefined>;
+    filterOperators: _angular_core.InputSignal<string[] | undefined>;
+    showFilterOperators: _angular_core.WritableSignal<boolean>;
+    template?: TemplateRef<any>;
     constructor();
+    ngOnInit(): void;
+    getFilterOperators(): string[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableColumnDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; }; "title": { "alias": "title"; "required": false; }; "emptyCellText": { "alias": "emptyCellText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; }; "shrink": { "alias": "shrink"; "required": false; }; "bold": { "alias": "bold"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; "filterField": { "alias": "filterField"; "required": false; }; }, {}, ["template"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyCellText": { "alias": "emptyCellText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterField": { "alias": "filterField"; "required": false; "isSignal": true; }; "filterOperator": { "alias": "filterOperator"; "required": false; "isSignal": true; }; "filterOperators": { "alias": "filterOperators"; "required": false; "isSignal": true; }; }, { "filterValue": "filterValueChange"; "filterOperator": "filterOperatorChange"; }, ["template"], never, true, never>;
 }
 
 declare class TableDetailRowDirective {
@@ -196,6 +201,8 @@ declare class TableComponent implements OnInit, AfterContentInit, OnDestroy {
     protected _onPageChange(pageIndex: number): void;
     protected _onToggleRowDetailClick(row: any): void;
     protected isRowExpanded(row: any): boolean;
+    protected _onToggleFilterOperator(col: TableColumnDirective): void;
+    protected _onSelectFilterOperator(col: TableColumnDirective, filterOperator: string): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "ng0-table", ["ng0Table"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "autoLoad": { "alias": "autoLoad"; "required": false; "isSignal": true; }; "showRowNumbers": { "alias": "showRowNumbers"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "pageable": { "alias": "pageable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "headerClass": { "alias": "headerClass"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; "isSignal": true; }; "loadingCover": { "alias": "loadingCover"; "required": false; "isSignal": true; }; }, {}, ["_detailRow", "_columns"], ["paging-first", "paging-last", "paging-next", "paging-previous", "paging-info"], true, never>;
@@ -208,4 +215,3 @@ declare class TableModule {
 }
 
 export { TableColumnDirective, TableComponent, TableDetailRowDirective, TableModule };
-export type { DataTableColumnBadgeValueType };

package/data/index.d.ts

@@ -69,7 +69,7 @@ interface DataRequestFilter {
      */
     operator?: string;
     /**
-     * Indicates if the filter is case-sensitive.
+     * Indicates if the filter is case-sensitive. only for text columns.
      * Default is false.
      */
     caseSensitive?: boolean;
@@ -156,48 +156,9 @@ type DataSourceLike<T = any> = Array<any> | DataLoader<T> | DataSource<T> | unde
  */
 declare function convertToDataSource<T>(source: DataSourceLike): DataSource<T>;
 /**
- * StandardFilterOperators is an enumeration of standard filter operators
- * that can be used in data requests to filter data.
- * It includes operators like Contains, StartsWith, EndsWith, and Equals.
+ * LogicalOperator is a list of predefined logical operators that can be used in data requests to filter data.
  */
-declare enum StandardFilterOperators {
-    /**
-     * A filter that matches items that contain the specified value.
-     */
-    Contains = "contains",
-    /**
-     * A filter that matches items that start with the specified value.
-     */
-    StartsWith = "startsWith",
-    /**
-     * A filter that matches items that end with the specified value.
-     */
-    EndsWith = "endsWith",
-    /**
-     * A filter that matches items that are equal to the specified value.
-     */
-    Equals = "equals",
-    /**
-     * A filter that matches items that are not equal to the specified value.
-     */
-    NotEquals = "notEquals",
-    /**
-     * A filter that matches items that are greater than the specified value.
-     */
-    GreaterThan = "greaterThan",
-    /**
-     * A filter that matches items that are greater than or equal to the specified value.
-     */
-    GreaterThanOrEqual = "greaterThanOrEqual",
-    /**
-     * A filter that matches items that are less than the specified value.
-     */
-    LessThan = "lessThan",
-    /**
-     * A filter that matches items that are less than or equal to the specified value.
-     */
-    LessThanOrEqual = "lessThanOrEqual"
-}
+type LogicalOperator = 'contains' | 'endsWith' | 'startsWith' | 'like' | 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
 
-export { ArrayDataSource, AsyncDataSource, DataRequest, DataResult, DataSource, StandardFilterOperators, convertToDataSource, toDataResult };
-export type { DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceLike };
+export { ArrayDataSource, AsyncDataSource, DataRequest, DataResult, DataSource, convertToDataSource, toDataResult };
+export type { DataLoader, DataRequestFilter, DataRequestPage, DataRequestSort, DataSourceLike, LogicalOperator };

package/fesm2022/bootkit-ng0-components-form-field.mjs

@@ -96,13 +96,13 @@ class FormFieldComponent {
     ngOnDestroy() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i0.DestroyRef }, { token: i1.NgForm, optional: true }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormFieldComponent, isStandalone: true, selector: "ng0-form-field, ng0-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, showSubscripts: { classPropertyName: "showSubscripts", publicName: "showSubscripts", isSignal: true, isRequired: false, transformFunction: null }, inputGroup: { classPropertyName: "inputGroup", publicName: "inputGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_onFocusOut()" }, properties: { "class.required-form-field": "this.isRequired" } }, queries: [{ propertyName: "_ngControl", first: true, predicate: NgControl, descendants: true, static: true }, { propertyName: "_ngControlElement", first: true, predicate: NgControl, descendants: true, read: ElementRef, static: true }], exportAs: ["ng0FormField"], ngImport: i0, template: "@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}", styles: [":host{display:block}.form-field-subscript-wrapper{margin-top:.2rem;min-height:1.5em;line-height:1.5em;text-align:justify}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FormFieldComponent, isStandalone: true, selector: "ng0-form-field, ng0-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, showSubscripts: { classPropertyName: "showSubscripts", publicName: "showSubscripts", isSignal: true, isRequired: false, transformFunction: null }, inputGroup: { classPropertyName: "inputGroup", publicName: "inputGroup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_onFocusOut()" }, properties: { "class.required-form-field": "this.isRequired" } }, queries: [{ propertyName: "_ngControl", first: true, predicate: NgControl, descendants: true, static: true }, { propertyName: "_ngControlElement", first: true, predicate: NgControl, descendants: true, read: ElementRef, static: true }], exportAs: ["ng0FormField"], ngImport: i0, template: "@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@else if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}", styles: [":host{display:block}.form-field-subscript-wrapper{margin-top:.2rem;min-height:1.5em;line-height:1.5em;text-align:justify}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng0-form-field, ng0-field', exportAs: 'ng0FormField', standalone: true, imports: [
                         CommonModule
-                    ], template: "@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}", styles: [":host{display:block}.form-field-subscript-wrapper{margin-top:.2rem;min-height:1.5em;line-height:1.5em;text-align:justify}\n"] }]
+                    ], template: "@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@else if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}", styles: [":host{display:block}.form-field-subscript-wrapper{margin-top:.2rem;min-height:1.5em;line-height:1.5em;text-align:justify}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.DestroyRef }, { type: i1.NgForm, decorators: [{
                     type: Optional
                 }] }, { type: i2.LocalizationService }], propDecorators: { isRequired: [{

package/fesm2022/bootkit-ng0-components-form-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bootkit-ng0-components-form-field.mjs","sources":["../../../projects/ng0/components/form-field/form-field.component.ts","../../../projects/ng0/components/form-field/form-field.component.html","../../../projects/ng0/components/form-field/form-field.module.ts","../../../projects/ng0/components/form-field/bootkit-ng0-components-form-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { DestroyRef, HostListener, input, signal } from '@angular/core';\nimport { Component, Input, ContentChild, AfterContentInit, Optional, HostBinding, OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, NgControl, NgForm } from '@angular/forms';\nimport { Locale, LocalizationService } from '@bootkit/ng0/localization';\n\n@Component({\n  selector: 'ng0-form-field, ng0-field',\n  exportAs: 'ng0FormField',\n  templateUrl: './form-field.component.html',\n  styleUrls: ['./form-field.component.scss'],\n  standalone: true,\n  imports: [\n    CommonModule\n  ],\n})\nexport class FormFieldComponent implements OnInit, AfterContentInit, OnDestroy {\n\n  /**\n   * The label text for the form field.\n   */\n  public label = input<string>();\n\n  /**\n   * The hint text to display below the form field.\n   * This is typically used to provide additional information or instructions to the user.\n   */\n  public hint = input<string>();\n\n  /**\n   * If true, the form-field will show validation errors.\n   * This is useful for displaying validation messages when the form control is invalid.\n   */\n  public showErrors = input(true);\n\n  /**\n   * If true, the form-field will show a red asterisk for required fields.\n   * This is only a visual indicator and does not enforce validation.\n   */\n  public showRequiredIndicator = input(true);\n\n  /**\n   * If true, the form-field will show subscripts (e.g. hints, errors) for the field label.\n   * This is useful for displaying additional information or validation messages.\n   */\n  public showSubscripts = input(true);\n\n  /**\n   * If true, the form-field will be rendered inside a \".input-group\" element.\n   */\n  public inputGroup = input(true);\n\n  /**\n   * Returns the first localized error of the control \n   */\n  public get errorText() { return this._errorText; }\n\n  /** Reports whether the control is touched. */\n  public get touched(): boolean | null | undefined { return this._ngControl?.touched; }\n\n  /** Reports whether the control is dirty. */\n  public get dirty(): boolean | null | undefined { return this._ngControl?.dirty; }\n\n  /** Returns true if this form-field is required, otherwise returns false. */\n  @HostBinding('class.required-form-field')\n  public get isRequired(): boolean { return this._isRequired; }\n\n  @HostListener('focusout')\n  private _onFocusOut() { this._validate(); }\n\n  @ContentChild(NgControl, { static: true })\n  private _ngControl?: NgControl;\n\n  @ContentChild(NgControl, { static: true, read: ElementRef })\n  private _ngControlElement?: ElementRef;\n\n  private _isRequired = false;\n  private _locale?: Locale;\n  private _errorText?: string;\n\n  constructor(\n    private _renderer: Renderer2,\n    private _destroyRef: DestroyRef,\n    @Optional() private _form: NgForm,\n    private _ls: LocalizationService,\n  ) {\n    this._locale = this._ls.get();\n    this._ls.change.pipe(takeUntilDestroyed()).subscribe(e => this._locale = e.new);\n  }\n\n  ngOnInit(): void {\n  }\n\n  ngAfterContentInit(): void {\n    this._isRequired = this._isRequiredField();\n\n    if (this._ngControl) {\n      this._ngControl?.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(change => {\n        this._validate();\n      });\n    }\n  }\n\n  private _validate() {\n    if (!this._ngControl || !this.dirty || !this.touched) {\n      return;\n    }\n\n    const invalid = this._ngControl.status === 'INVALID';\n    if (invalid) {\n      this._errorText = this._locale?.translateFirstError(this._ngControl.errors, 'Invalid')?.text;\n    } else {\n      this._errorText = undefined;\n    }\n    this._renderer.addClass(this._ngControlElement!.nativeElement, invalid ? 'is-invalid' : 'is-valid');\n    this._renderer.removeClass(this._ngControlElement!.nativeElement, invalid ? 'is-valid' : 'is-invalid');\n  }\n\n  private _isRequiredField(): boolean {\n    const validator = this._ngControl?.validator;\n    const errors = validator && validator(new FormControl(null));\n    return errors != null && errors['required'] === true;\n  }\n\n  ngOnDestroy(): void {\n  }\n}\n","@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormFieldComponent } from './form-field.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormFieldComponent,\n  ],\n  exports: [\n    FormFieldComponent,\n  ]\n})\nexport class FormFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bootkit-ng0-components-form-field.mjs","sources":["../../../projects/ng0/components/form-field/form-field.component.ts","../../../projects/ng0/components/form-field/form-field.component.html","../../../projects/ng0/components/form-field/form-field.module.ts","../../../projects/ng0/components/form-field/bootkit-ng0-components-form-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { DestroyRef, HostListener, input, signal } from '@angular/core';\nimport { Component, Input, ContentChild, AfterContentInit, Optional, HostBinding, OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, NgControl, NgForm } from '@angular/forms';\nimport { Locale, LocalizationService } from '@bootkit/ng0/localization';\n\n@Component({\n  selector: 'ng0-form-field, ng0-field',\n  exportAs: 'ng0FormField',\n  templateUrl: './form-field.component.html',\n  styleUrls: ['./form-field.component.scss'],\n  standalone: true,\n  imports: [\n    CommonModule\n  ],\n})\nexport class FormFieldComponent implements OnInit, AfterContentInit, OnDestroy {\n\n  /**\n   * The label text for the form field.\n   */\n  public label = input<string>();\n\n  /**\n   * The hint text to display below the form field.\n   * This is typically used to provide additional information or instructions to the user.\n   */\n  public hint = input<string>();\n\n  /**\n   * If true, the form-field will show validation errors.\n   * This is useful for displaying validation messages when the form control is invalid.\n   */\n  public showErrors = input(true);\n\n  /**\n   * If true, the form-field will show a red asterisk for required fields.\n   * This is only a visual indicator and does not enforce validation.\n   */\n  public showRequiredIndicator = input(true);\n\n  /**\n   * If true, the form-field will show subscripts (e.g. hints, errors) for the field label.\n   * This is useful for displaying additional information or validation messages.\n   */\n  public showSubscripts = input(true);\n\n  /**\n   * If true, the form-field will be rendered inside a \".input-group\" element.\n   */\n  public inputGroup = input(true);\n\n  /**\n   * Returns the first localized error of the control \n   */\n  public get errorText() { return this._errorText; }\n\n  /** Reports whether the control is touched. */\n  public get touched(): boolean | null | undefined { return this._ngControl?.touched; }\n\n  /** Reports whether the control is dirty. */\n  public get dirty(): boolean | null | undefined { return this._ngControl?.dirty; }\n\n  /** Returns true if this form-field is required, otherwise returns false. */\n  @HostBinding('class.required-form-field')\n  public get isRequired(): boolean { return this._isRequired; }\n\n  @HostListener('focusout')\n  private _onFocusOut() { this._validate(); }\n\n  @ContentChild(NgControl, { static: true })\n  private _ngControl?: NgControl;\n\n  @ContentChild(NgControl, { static: true, read: ElementRef })\n  private _ngControlElement?: ElementRef;\n\n  private _isRequired = false;\n  private _locale?: Locale;\n  private _errorText?: string;\n\n  constructor(\n    private _renderer: Renderer2,\n    private _destroyRef: DestroyRef,\n    @Optional() private _form: NgForm,\n    private _ls: LocalizationService,\n  ) {\n    this._locale = this._ls.get();\n    this._ls.change.pipe(takeUntilDestroyed()).subscribe(e => this._locale = e.new);\n  }\n\n  ngOnInit(): void {\n  }\n\n  ngAfterContentInit(): void {\n    this._isRequired = this._isRequiredField();\n\n    if (this._ngControl) {\n      this._ngControl?.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(change => {\n        this._validate();\n      });\n    }\n  }\n\n  private _validate() {\n    if (!this._ngControl || !this.dirty || !this.touched) {\n      return;\n    }\n\n    const invalid = this._ngControl.status === 'INVALID';\n    if (invalid) {\n      this._errorText = this._locale?.translateFirstError(this._ngControl.errors, 'Invalid')?.text;\n    } else {\n      this._errorText = undefined;\n    }\n    this._renderer.addClass(this._ngControlElement!.nativeElement, invalid ? 'is-invalid' : 'is-valid');\n    this._renderer.removeClass(this._ngControlElement!.nativeElement, invalid ? 'is-valid' : 'is-invalid');\n  }\n\n  private _isRequiredField(): boolean {\n    const validator = this._ngControl?.validator;\n    const errors = validator && validator(new FormControl(null));\n    return errors != null && errors['required'] === true;\n  }\n\n  ngOnDestroy(): void {\n  }\n}\n","@if(label()) {\n<label class=\"form-field-label\">\n  {{label()}}\n  <span *ngIf=\"isRequired && showRequiredIndicator()\" class=\"isc-form-field-required-marker\">*</span>\n</label>\n}\n\n@if(inputGroup()) {\n<div class=\"input-group\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>\n}@else {\n<ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n}\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n@if(showSubscripts()) {\n<div class=\"form-field-subscript-wrapper\">\n  @if(showErrors() && errorText && (touched || dirty)) {\n  <span class=\"form-field-error text-danger\">\n    {{errorText}}\n  </span>\n  }@else if(hint()) {\n  <span class=\"form-field-hint\">\n    {{hint()}}\n  </span>\n  }\n</div>\n}","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormFieldComponent } from './form-field.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormFieldComponent,\n  ],\n  exports: [\n    FormFieldComponent,\n  ]\n})\nexport class FormFieldModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/bootkit-ng0-components-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, TemplateRef, Input, ContentChild, Directive, signal, HostBinding, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, model, signal, TemplateRef, ContentChild, Directive, Input, HostBinding, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -10,26 +10,53 @@ import * as i1 from '@bootkit/ng0/localization';
 import { LocalizationModule } from '@bootkit/ng0/localization';
 import { convertToDataSource, DataRequest } from '@bootkit/ng0/data';
 import { PaginationComponent } from '@bootkit/ng0/components/pagination';
+import * as i4 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { NumberDirective } from '@bootkit/ng0/form';
 
 class TableColumnDirective {
-    field;
-    title;
+    field = input();
+    title = input();
     emptyCellText = input();
     /**
      * Type of the table cell.
      */
-    type = input();
+    type = input('text');
+    cellClass = input();
+    /** Deprecated */
+    bold = input(false);
+    shrink = input(false);
+    filterable = input(false);
+    filterValue = model();
+    filterField = input();
+    filterOperator = model();
+    filterOperators = input();
+    showFilterOperators = signal(false);
     template;
-    cellClass;
-    shrink = false;
-    bold = false;
-    filterable = false;
-    filterValue;
-    filterField;
     constructor() {
     }
+    ngOnInit() {
+        if (this.filterOperator() == undefined) {
+            this.filterOperator.set(this.type() == 'text' ? 'contains' : 'eq');
+        }
+    }
+    getFilterOperators() {
+        let op = this.filterOperators();
+        if (op && op.length > 0)
+            return op;
+        let type = this.type();
+        if (type == 'number' || type == 'currency' || type == 'date' || type == 'time') {
+            return ['eq', 'ne', 'gt', 'gte', 'lt', 'lte',];
+        }
+        else if (type == 'text') {
+            return ['contains', 'startsWith', 'endsWith', 'eq', 'ne'];
+        }
+        else {
+            return [];
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TableColumnDirective, isStandalone: true, selector: "ng0-table-col", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, emptyCellText: { classPropertyName: "emptyCellText", publicName: "emptyCellText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, shrink: { classPropertyName: "shrink", publicName: "shrink", isSignal: false, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, filterField: { classPropertyName: "filterField", publicName: "filterField", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TableColumnDirective, isStandalone: true, selector: "ng0-table-col", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyCellText: { classPropertyName: "emptyCellText", publicName: "emptyCellText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, shrink: { classPropertyName: "shrink", publicName: "shrink", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, filterField: { classPropertyName: "filterField", publicName: "filterField", isSignal: true, isRequired: false, transformFunction: null }, filterOperator: { classPropertyName: "filterOperator", publicName: "filterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValue: "filterValueChange", filterOperator: "filterOperatorChange" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableColumnDirective, decorators: [{
             type: Directive,
@@ -37,25 +64,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     selector: 'ng0-table-col',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { field: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], template: [{
+        }], ctorParameters: () => [], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], cellClass: [{
-                type: Input
-            }], shrink: [{
-                type: Input
-            }], bold: [{
-                type: Input
-            }], filterable: [{
-                type: Input
-            }], filterValue: [{
-                type: Input
-            }], filterField: [{
-                type: Input
             }] } });
 
 class TableDetailRowDirective {
@@ -193,6 +204,8 @@ class TableComponent {
         this._destroyRef = _destroyRef;
     }
     ngOnInit() {
+    }
+    ngAfterContentInit() {
         this._dataSource = convertToDataSource(this.source());
         const locale = this._ls.get();
         this._pagingFormatter = locale?.definition.components?.table?.pagingInfo ??
@@ -204,8 +217,6 @@ class TableComponent {
             this.load(this.pageable()?.pageIndex);
         }
     }
-    ngAfterContentInit() {
-    }
     /**
      * Load data for the specified page index (optional).
      * @param pageIndex The page index to load.
@@ -216,8 +227,8 @@ class TableComponent {
         let sort;
         if (this.filterable()) {
             this._columns.forEach(col => {
-                if (col.filterable && col.filterValue != '' && col.filterValue != undefined) {
-                    filters.push({ field: col.filterField ?? col.field, value: col.filterValue, operator: 'EQ' });
+                if (col.filterable() && col.filterValue() != '' && col.filterValue() != undefined) {
+                    filters.push({ field: col.filterField() ?? col.field(), value: col.filterValue(), operator: col.filterOperator() });
                 }
             });
         }
@@ -253,7 +264,7 @@ class TableComponent {
         return this._dataSource.isLoading;
     }
     _getCellValue(row, col) {
-        var subFields = col.field.split('.');
+        var subFields = col.field().split('.');
         let value = row[subFields[0]];
         for (let i = 1; i < subFields.length; i++) {
             if (value == null)
@@ -278,11 +289,25 @@ class TableComponent {
         var state = this._rowStates.get(row);
         return state == undefined ? false : state.expanded;
     }
+    _onToggleFilterOperator(col) {
+        if (col.showFilterOperators()) {
+            col.showFilterOperators.set(false);
+        }
+        else {
+            this._columns.forEach(x => x.showFilterOperators.set(false));
+            col.showFilterOperators.set(true);
+        }
+    }
+    _onSelectFilterOperator(col, filterOperator) {
+        col.filterOperator.set(filterOperator);
+        this._columns.forEach(x => x.showFilterOperators.set(false));
+        this.load(0);
+    }
     ngOnDestroy() {
         this._changeSubscription?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i1.LocalizationService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TableComponent, isStandalone: true, selector: "ng0-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, loadingCover: { classPropertyName: "loadingCover", publicName: "loadingCover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng0-loading": "this.isLoading" } }, queries: [{ propertyName: "_detailRow", first: true, predicate: TableDetailRowDirective, descendants: true }, { propertyName: "_columns", predicate: TableColumnDirective }], exportAs: ["ng0Table"], ngImport: i0, template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\n\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\n\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n      <!-- <caption>{{caption()}}</caption> -->\n    }\n\n    @if (showHeader()) {\n      <thead [ngClass]=\"headerClass()\">\n        <tr>\n          @if (_detailRow) {\n            <th></th>\n          }\n\n          @if (showRowNumbers()) {\n            <th class=\"row-number text-muted\">#</th>\n          }\n\n          @for (col of _columns; track $index) {\n            <th>{{ col.title }}</th>\n          }\n        </tr>\n      </thead>\n    }\n\n    @if (filterable()) {\n      <thead>\n        <tr>\n          @if (_detailRow) {\n            <th></th>\n          }\n\n          @if (showRowNumbers()) {\n            <th></th>\n          }\n\n          @for (col of _columns; track $index) {\n            <!-- <th>\n                    @if(col.filterable) {\n                    @if(col.type == 'text') {\n                    <input [name]=\"'datatablecol-' + col.field\"\n                           type=\"text\"\n                           [maxlength]=\"50\"\n                           class=\"form-control form-control-sm\"\n                           [(ngModel)]=\"col.filterValue\"\n                           (keydown.enter)=\"load()\">\n                    }@else if(col.type == 'number') {\n                    <input [name]=\"'datatablecol-' + col.field\"\n                           type=\"number\"\n                           class=\"form-control form-control-sm\"\n                           [(ngModel)]=\"col.filterValue\"\n                           (keydown.enter)=\"load()\">\n                    }\n                    }\n                </th> -->\n          }\n        </tr>\n      </thead>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n        <tr class=\"ng0-table-loading-row\">\n          <td [attr.colspan]=\"$columnsCount\">\n            @switch (loadingIndicator()) {\n              @case ('spinner') {\n                <div class=\"text-center\">\n                  <div class=\"spinner-border\" role=\"status\"></div>\n                </div>\n              }\n              <!-- @case ('placeholder') {\n                  <p class=\"text-secondary placeholder-glow mb-0\">\n                    <span class=\"placeholder col-3\"></span>\n                    <span class=\"placeholder col-4\"></span>\n                    <span class=\"placeholder col-4\"></span>\n                    <span class=\"placeholder col-6\"></span>\n                    <span class=\"placeholder col-8\"></span>\n                  </p>\n                } -->\n            }\n          </td>\n        </tr>\n      } @else {\n        @if ($data) {\n          @if ($data.length > 0) {\n            @for (row of $data; track $index) {\n              <tr [class.table-active]=\"isRowExpanded(row)\">\n                @if (_detailRow) {\n                  <td class=\"detail-row-expander\">\n                    @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n                      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n                        @if (isRowExpanded(row)) {\n                          <i class=\"far fa-minus\"></i>\n                        } @else {\n                          <i class=\"far fa-plus\"></i>\n                        }\n                      </button>\n                    }\n                  </td>\n                }\n\n                @if (showRowNumbers()) {\n                  <td class=\"ng0-table-row-number\">\n                      {{ $firstRecord + $index }}\n                  </td>\n                }\n\n                @for (col of _columns; track $index) {\n                  <td\n                    [ngClass]=\"col.cellClass\"\n                    [class.shrinked]=\"col.shrink\"\n                    [class.fw-bold]=\"col.bold\"\n                  >\n                    @if (col.template) {\n                      <ng-container\n                        *ngTemplateOutlet=\"col.template; context: { $implicit: row }\"\n                      ></ng-container>\n                    } @else if (col.field) {\n                      @let cellValue = _getCellValue(row, col);\n\n                      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n                        {{ col.emptyCellText() }}\n                      } @else {\n                        @if (col.type()) {\n                          @let type = $any(col.type());\n\n                          @if (type == \"date\" || type.date) {\n                            {{ cellValue | ng0Date }}\n                          } @else if (type == \"number\" || type.number) {\n                            {{ cellValue | number }}\n                          } @else if (type == \"currency\") {\n                            {{ cellValue | currency }}\n                          } @else if (type.enum) {\n                            {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n                          } @else if (type.boolean || type == \"boolean\") {\n                            {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n                          }\n                        } @else {\n                          {{ cellValue }}\n                        }\n                      }\n                    }\n                  </td>\n                }\n              </tr>\n\n              @if (_detailRow && isRowExpanded(row)) {\n                <tr class=\"detail-row\">\n                  <td\n                    [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n                    class=\"ps-2 pb-4\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"\n                    ></ng-container>\n                  </td>\n                </tr>\n              }\n            }\n          } @else {\n            <tr class=\"ng0-table-no-records-row\">\n              <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n                {{ $tableLocale?.noRecords ?? 'No Records.' }}\n              </td>\n            </tr>\n          }\n        } @else if (_lastError) {\n          <tr class=\"ng0-table-error-row\">\n            <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n              <div class=\"d-flex align-items-baseline\">\n                <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n                <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n                  {{ \"retry\" | ng0Translate }}\n                </button>\n              </div>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\n    <div class=\"ng0-table-pagination me-2\">\n      <ng0-pagination\n        class=\"mb-0 d-inline-block\"\n        [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\n        [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\n        [totalRecords]=\"$totalRecordsCount!\"\n        [pageSize]=\"$pageable.pageSize!\"\n        [selectedPage]=\"$pageIndex\"\n        (itemClick)=\"_onPageChange($event)\"\n        [maxVisiblePages]=\"$pageable.maxVisiblePages!\"\n      >\n        <ng-container ngProjectAs=\"first\">\n          <ng-content select=\"paging-first\">\n            {{ \"first\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"last\">\n          <ng-content select=\"paging-last\">\n            {{ \"last\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"next\">\n          <ng-content select=\"paging-next\">\n            {{ \"next\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"previous\">\n          <ng-content select=\"paging-previous\">\n            {{ \"previous\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n      </ng0-pagination>\n    </div>\n\n    @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\n      <div class=\"ng0-table-paging-options\">\n        <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n          <option [ngValue]=\"10\" selected>10</option>\n        </select>\n      </div>\n    }\n\n    @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\n      <div class=\"ng0-table-paging-info ms-auto\">\n        <ng-content select=\"paging-info\">\n          {{\n            _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!, currentPage: $pageIndex!})\n          }}\n        </ng-content>\n      </div>\n    }\n  }\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n  <div class=\"ng0-table-loading-cover text-center\">\n    @if (loadingCover() == 'spinner') {\n      <div class=\"spinner-border\" role=\"status\"></div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i1.TranslatePipe, name: "ng0Translate" }, { kind: "pipe", type: i1.TranslateEnumPipe, name: "ng0TranslateEnum" }, { kind: "pipe", type: i1.DatePipe, name: "ng0Date" }, { kind: "pipe", type: i1.LocalizeBooleanPipe, name: "ng0LocalizeBool" }, { kind: "component", type: PaginationComponent, selector: "ng0-pagination", inputs: ["totalRecords", "pageSize", "selectedPage", "maxVisiblePages", "showNextPreviousButtons", "showFirstLastButtons"], outputs: ["itemClick"], exportAs: ["ng0Pagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TableComponent, isStandalone: true, selector: "ng0-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, loadingCover: { classPropertyName: "loadingCover", publicName: "loadingCover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng0-loading": "this.isLoading" } }, queries: [{ propertyName: "_detailRow", first: true, predicate: TableDetailRowDirective, descendants: true }, { propertyName: "_columns", predicate: TableColumnDirective }], exportAs: ["ng0Table"], ngImport: i0, template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n    <caption>{{caption()}}</caption>\n    }\n\n    @if (showHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    }\n\n    @if (filterable()) {\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n      <tr class=\"ng0-table-loading-row\">\n        <td [attr.colspan]=\"$columnsCount\">\n          @switch (loadingIndicator()) {\n          @case ('spinner') {\n          <div class=\"text-center\">\n            <div class=\"spinner-border\" role=\"status\"></div>\n          </div>\n          }\n          }\n        </td>\n      </tr>\n      } @else {\n      @if ($data) {\n      @if ($data.length > 0) {\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\n      } @else {\n      <tr class=\"ng0-table-no-records-row\">\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\n        </td>\n      </tr>\n      }\n      } @else if (_lastError) {\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n<div class=\"ng0-table-loading-cover text-center\">\n  @if (loadingCover() == 'spinner') {\n  <div class=\"spinner-border\" role=\"status\"></div>\n  }\n</div>\n}\n\n<ng-template #filtersTemplate>\n  <thead>\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th></th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>\n        @if(col.filterable() && (col.field() || col.filterValue())) {\n\n        <div class=\"input-group\">\n          @switch (col.type()) {\n          @case ('text') {\n          <input [name]=\"'filter-' + col.field\"\n                 type=\"search\"\n                 [maxlength]=\"50\"\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          @case ('number') {\n          <input [name]=\"'datatablecol-' + col.field\"\n                 type=\"search\"\n                 ng0Number\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          }\n\n          <button class=\"btn btn-outline-light\"\n                  style=\"border-color: var(--bs-border-color);\"\n                  cdkOverlayOrigin\n                  #trigger=\"cdkOverlayOrigin\"\n                  (click)=\"_onToggleFilterOperator(col)\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976C16.1903 11.8998 16.5085 11.7206 17.145 11.3624L20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3Z\"\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n\n        <ng-template\n                     cdkConnectedOverlay\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\n                     (detach)=\"col.showFilterOperators.set(false)\">\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\n            @for (item of col.getFilterOperators(); track $index) {\n            <li>\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\n                      (click)=\"_onSelectFilterOperator(col, item)\">\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\n              </button>\n            </li>\n            }\n          </ul>\n        </ng-template>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #headerTemplate>\n  <thead [ngClass]=\"headerClass()\">\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th class=\"row-number text-muted\">#</th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>{{ col.title() }}</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRowsTemplate>\n  @for (row of $data; track $index) {\n  <tr [class.table-active]=\"isRowExpanded(row)\">\n    @if (_detailRow) {\n    <td class=\"detail-row-expander\">\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n        @if (isRowExpanded(row)) {\n        <i class=\"far fa-minus\"></i>\n        } @else {\n        <i class=\"far fa-plus\"></i>\n        }\n      </button>\n      }\n    </td>\n    }\n\n    @if (showRowNumbers()) {\n    <td class=\"ng0-table-row-number\">\n      {{ $firstRecord + $index }}\n    </td>\n    }\n\n    @for (col of _columns; track $index) {\n    <td\n        [ngClass]=\"col.cellClass()\"\n        [class.shrinked]=\"col.shrink()\"\n        [class.fw-bold]=\"col.bold()\">\n      @if (col.template) {\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\n      </ng-container>\n      } @else if (col.field()) {\n      @let cellValue = _getCellValue(row, col);\n\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n      {{ col.emptyCellText() }}\n      } @else {\n      @if (col.type()) {\n      @let type = $any(col.type());\n\n      @if (type == \"date\") {\n      {{ cellValue | ng0Date }}\n      } @else if (type == \"number\") {\n      {{ cellValue | number }}\n      } @else if (type == \"currency\") {\n      {{ cellValue | currency }}\n      } @else if (type.enum) {\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n      } @else if (type.boolean || type == \"boolean\") {\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n      }@else {\n      {{ cellValue }}\n      }\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n\n  @if (_detailRow && isRowExpanded(row)) {\n  <tr class=\"detail-row\">\n    <td\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n        class=\"ps-2 pb-4\">\n      <ng-container\n                    *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"></ng-container>\n    </td>\n  </tr>\n  }\n  }\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\n  <div class=\"ng0-table-pagination me-2\">\n    <ng0-pagination\n                    class=\"mb-0 d-inline-block\"\n                    [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\n                    [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\n                    [totalRecords]=\"$totalRecordsCount!\"\n                    [pageSize]=\"$pageable.pageSize!\"\n                    [selectedPage]=\"$pageIndex\"\n                    (itemClick)=\"_onPageChange($event)\"\n                    [maxVisiblePages]=\"$pageable.maxVisiblePages!\">\n      <ng-container ngProjectAs=\"first\">\n        <ng-content select=\"paging-first\">\n          {{ \"first\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"last\">\n        <ng-content select=\"paging-last\">\n          {{ \"last\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"next\">\n        <ng-content select=\"paging-next\">\n          {{ \"next\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"previous\">\n        <ng-content select=\"paging-previous\">\n          {{ \"previous\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n    </ng0-pagination>\n  </div>\n\n  @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\n  <div class=\"ng0-table-paging-options\">\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n      <option [ngValue]=\"10\" selected>10</option>\n    </select>\n  </div>\n  }\n\n  @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\n  <div class=\"ng0-table-paging-info ms-auto\">\n    <ng-content select=\"paging-info\">\n      {{\n      _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!,\n      currentPage: $pageIndex!})\n      }}\n    </ng-content>\n  </div>\n  }\n  }\n</ng-template>\n\n<ng-template #nowDataTemplate>\n  <tr class=\"ng0-table-error-row\">\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n      <div class=\"d-flex align-items-baseline\">\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n          {{ \"retry\" | ng0Translate }}\n        </button>\n      </div>\n    </td>\n  </tr>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}.fade-in{animation:fade-in .5s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i1.TranslatePipe, name: "ng0Translate" }, { kind: "pipe", type: i1.TranslateEnumPipe, name: "ng0TranslateEnum" }, { kind: "pipe", type: i1.DatePipe, name: "ng0Date" }, { kind: "pipe", type: i1.LocalizeBooleanPipe, name: "ng0LocalizeBool" }, { kind: "component", type: PaginationComponent, selector: "ng0-pagination", inputs: ["totalRecords", "pageSize", "selectedPage", "maxVisiblePages", "showNextPreviousButtons", "showFirstLastButtons"], outputs: ["itemClick"], exportAs: ["ng0Pagination"] }, { kind: "directive", type: NumberDirective, selector: "[ng0Number]", inputs: ["minFractionDigits", "maxFractionDigits", "useGrouping", "numberType"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -290,8 +315,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CommonModule,
                         FormsModule,
                         LocalizationModule,
-                        PaginationComponent
-                    ], template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\n\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\n\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n      <!-- <caption>{{caption()}}</caption> -->\n    }\n\n    @if (showHeader()) {\n      <thead [ngClass]=\"headerClass()\">\n        <tr>\n          @if (_detailRow) {\n            <th></th>\n          }\n\n          @if (showRowNumbers()) {\n            <th class=\"row-number text-muted\">#</th>\n          }\n\n          @for (col of _columns; track $index) {\n            <th>{{ col.title }}</th>\n          }\n        </tr>\n      </thead>\n    }\n\n    @if (filterable()) {\n      <thead>\n        <tr>\n          @if (_detailRow) {\n            <th></th>\n          }\n\n          @if (showRowNumbers()) {\n            <th></th>\n          }\n\n          @for (col of _columns; track $index) {\n            <!-- <th>\n                    @if(col.filterable) {\n                    @if(col.type == 'text') {\n                    <input [name]=\"'datatablecol-' + col.field\"\n                           type=\"text\"\n                           [maxlength]=\"50\"\n                           class=\"form-control form-control-sm\"\n                           [(ngModel)]=\"col.filterValue\"\n                           (keydown.enter)=\"load()\">\n                    }@else if(col.type == 'number') {\n                    <input [name]=\"'datatablecol-' + col.field\"\n                           type=\"number\"\n                           class=\"form-control form-control-sm\"\n                           [(ngModel)]=\"col.filterValue\"\n                           (keydown.enter)=\"load()\">\n                    }\n                    }\n                </th> -->\n          }\n        </tr>\n      </thead>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n        <tr class=\"ng0-table-loading-row\">\n          <td [attr.colspan]=\"$columnsCount\">\n            @switch (loadingIndicator()) {\n              @case ('spinner') {\n                <div class=\"text-center\">\n                  <div class=\"spinner-border\" role=\"status\"></div>\n                </div>\n              }\n              <!-- @case ('placeholder') {\n                  <p class=\"text-secondary placeholder-glow mb-0\">\n                    <span class=\"placeholder col-3\"></span>\n                    <span class=\"placeholder col-4\"></span>\n                    <span class=\"placeholder col-4\"></span>\n                    <span class=\"placeholder col-6\"></span>\n                    <span class=\"placeholder col-8\"></span>\n                  </p>\n                } -->\n            }\n          </td>\n        </tr>\n      } @else {\n        @if ($data) {\n          @if ($data.length > 0) {\n            @for (row of $data; track $index) {\n              <tr [class.table-active]=\"isRowExpanded(row)\">\n                @if (_detailRow) {\n                  <td class=\"detail-row-expander\">\n                    @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n                      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n                        @if (isRowExpanded(row)) {\n                          <i class=\"far fa-minus\"></i>\n                        } @else {\n                          <i class=\"far fa-plus\"></i>\n                        }\n                      </button>\n                    }\n                  </td>\n                }\n\n                @if (showRowNumbers()) {\n                  <td class=\"ng0-table-row-number\">\n                      {{ $firstRecord + $index }}\n                  </td>\n                }\n\n                @for (col of _columns; track $index) {\n                  <td\n                    [ngClass]=\"col.cellClass\"\n                    [class.shrinked]=\"col.shrink\"\n                    [class.fw-bold]=\"col.bold\"\n                  >\n                    @if (col.template) {\n                      <ng-container\n                        *ngTemplateOutlet=\"col.template; context: { $implicit: row }\"\n                      ></ng-container>\n                    } @else if (col.field) {\n                      @let cellValue = _getCellValue(row, col);\n\n                      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n                        {{ col.emptyCellText() }}\n                      } @else {\n                        @if (col.type()) {\n                          @let type = $any(col.type());\n\n                          @if (type == \"date\" || type.date) {\n                            {{ cellValue | ng0Date }}\n                          } @else if (type == \"number\" || type.number) {\n                            {{ cellValue | number }}\n                          } @else if (type == \"currency\") {\n                            {{ cellValue | currency }}\n                          } @else if (type.enum) {\n                            {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n                          } @else if (type.boolean || type == \"boolean\") {\n                            {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n                          }\n                        } @else {\n                          {{ cellValue }}\n                        }\n                      }\n                    }\n                  </td>\n                }\n              </tr>\n\n              @if (_detailRow && isRowExpanded(row)) {\n                <tr class=\"detail-row\">\n                  <td\n                    [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n                    class=\"ps-2 pb-4\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"\n                    ></ng-container>\n                  </td>\n                </tr>\n              }\n            }\n          } @else {\n            <tr class=\"ng0-table-no-records-row\">\n              <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n                {{ $tableLocale?.noRecords ?? 'No Records.' }}\n              </td>\n            </tr>\n          }\n        } @else if (_lastError) {\n          <tr class=\"ng0-table-error-row\">\n            <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n              <div class=\"d-flex align-items-baseline\">\n                <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n                <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n                  {{ \"retry\" | ng0Translate }}\n                </button>\n              </div>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\n    <div class=\"ng0-table-pagination me-2\">\n      <ng0-pagination\n        class=\"mb-0 d-inline-block\"\n        [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\n        [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\n        [totalRecords]=\"$totalRecordsCount!\"\n        [pageSize]=\"$pageable.pageSize!\"\n        [selectedPage]=\"$pageIndex\"\n        (itemClick)=\"_onPageChange($event)\"\n        [maxVisiblePages]=\"$pageable.maxVisiblePages!\"\n      >\n        <ng-container ngProjectAs=\"first\">\n          <ng-content select=\"paging-first\">\n            {{ \"first\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"last\">\n          <ng-content select=\"paging-last\">\n            {{ \"last\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"next\">\n          <ng-content select=\"paging-next\">\n            {{ \"next\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n\n        <ng-container ngProjectAs=\"previous\">\n          <ng-content select=\"paging-previous\">\n            {{ \"previous\" | ng0Translate }}\n          </ng-content>\n        </ng-container>\n      </ng0-pagination>\n    </div>\n\n    @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\n      <div class=\"ng0-table-paging-options\">\n        <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n          <option [ngValue]=\"10\" selected>10</option>\n        </select>\n      </div>\n    }\n\n    @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\n      <div class=\"ng0-table-paging-info ms-auto\">\n        <ng-content select=\"paging-info\">\n          {{\n            _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!, currentPage: $pageIndex!})\n          }}\n        </ng-content>\n      </div>\n    }\n  }\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n  <div class=\"ng0-table-loading-cover text-center\">\n    @if (loadingCover() == 'spinner') {\n      <div class=\"spinner-border\" role=\"status\"></div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}\n"] }]
+                        PaginationComponent,
+                        NumberDirective,
+                        OverlayModule
+                    ], template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n    <caption>{{caption()}}</caption>\n    }\n\n    @if (showHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    }\n\n    @if (filterable()) {\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n      <tr class=\"ng0-table-loading-row\">\n        <td [attr.colspan]=\"$columnsCount\">\n          @switch (loadingIndicator()) {\n          @case ('spinner') {\n          <div class=\"text-center\">\n            <div class=\"spinner-border\" role=\"status\"></div>\n          </div>\n          }\n          }\n        </td>\n      </tr>\n      } @else {\n      @if ($data) {\n      @if ($data.length > 0) {\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\n      } @else {\n      <tr class=\"ng0-table-no-records-row\">\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\n        </td>\n      </tr>\n      }\n      } @else if (_lastError) {\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n<div class=\"ng0-table-loading-cover text-center\">\n  @if (loadingCover() == 'spinner') {\n  <div class=\"spinner-border\" role=\"status\"></div>\n  }\n</div>\n}\n\n<ng-template #filtersTemplate>\n  <thead>\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th></th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>\n        @if(col.filterable() && (col.field() || col.filterValue())) {\n\n        <div class=\"input-group\">\n          @switch (col.type()) {\n          @case ('text') {\n          <input [name]=\"'filter-' + col.field\"\n                 type=\"search\"\n                 [maxlength]=\"50\"\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          @case ('number') {\n          <input [name]=\"'datatablecol-' + col.field\"\n                 type=\"search\"\n                 ng0Number\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          }\n\n          <button class=\"btn btn-outline-light\"\n                  style=\"border-color: var(--bs-border-color);\"\n                  cdkOverlayOrigin\n                  #trigger=\"cdkOverlayOrigin\"\n                  (click)=\"_onToggleFilterOperator(col)\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976C16.1903 11.8998 16.5085 11.7206 17.145 11.3624L20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3Z\"\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n\n        <ng-template\n                     cdkConnectedOverlay\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\n                     (detach)=\"col.showFilterOperators.set(false)\">\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\n            @for (item of col.getFilterOperators(); track $index) {\n            <li>\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\n                      (click)=\"_onSelectFilterOperator(col, item)\">\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\n              </button>\n            </li>\n            }\n          </ul>\n        </ng-template>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #headerTemplate>\n  <thead [ngClass]=\"headerClass()\">\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th class=\"row-number text-muted\">#</th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>{{ col.title() }}</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRowsTemplate>\n  @for (row of $data; track $index) {\n  <tr [class.table-active]=\"isRowExpanded(row)\">\n    @if (_detailRow) {\n    <td class=\"detail-row-expander\">\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n        @if (isRowExpanded(row)) {\n        <i class=\"far fa-minus\"></i>\n        } @else {\n        <i class=\"far fa-plus\"></i>\n        }\n      </button>\n      }\n    </td>\n    }\n\n    @if (showRowNumbers()) {\n    <td class=\"ng0-table-row-number\">\n      {{ $firstRecord + $index }}\n    </td>\n    }\n\n    @for (col of _columns; track $index) {\n    <td\n        [ngClass]=\"col.cellClass()\"\n        [class.shrinked]=\"col.shrink()\"\n        [class.fw-bold]=\"col.bold()\">\n      @if (col.template) {\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\n      </ng-container>\n      } @else if (col.field()) {\n      @let cellValue = _getCellValue(row, col);\n\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n      {{ col.emptyCellText() }}\n      } @else {\n      @if (col.type()) {\n      @let type = $any(col.type());\n\n      @if (type == \"date\") {\n      {{ cellValue | ng0Date }}\n      } @else if (type == \"number\") {\n      {{ cellValue | number }}\n      } @else if (type == \"currency\") {\n      {{ cellValue | currency }}\n      } @else if (type.enum) {\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n      } @else if (type.boolean || type == \"boolean\") {\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n      }@else {\n      {{ cellValue }}\n      }\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n\n  @if (_detailRow && isRowExpanded(row)) {\n  <tr class=\"detail-row\">\n    <td\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n        class=\"ps-2 pb-4\">\n      <ng-container\n                    *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"></ng-container>\n    </td>\n  </tr>\n  }\n  }\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\n  <div class=\"ng0-table-pagination me-2\">\n    <ng0-pagination\n                    class=\"mb-0 d-inline-block\"\n                    [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\n                    [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\n                    [totalRecords]=\"$totalRecordsCount!\"\n                    [pageSize]=\"$pageable.pageSize!\"\n                    [selectedPage]=\"$pageIndex\"\n                    (itemClick)=\"_onPageChange($event)\"\n                    [maxVisiblePages]=\"$pageable.maxVisiblePages!\">\n      <ng-container ngProjectAs=\"first\">\n        <ng-content select=\"paging-first\">\n          {{ \"first\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"last\">\n        <ng-content select=\"paging-last\">\n          {{ \"last\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"next\">\n        <ng-content select=\"paging-next\">\n          {{ \"next\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"previous\">\n        <ng-content select=\"paging-previous\">\n          {{ \"previous\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n    </ng0-pagination>\n  </div>\n\n  @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\n  <div class=\"ng0-table-paging-options\">\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n      <option [ngValue]=\"10\" selected>10</option>\n    </select>\n  </div>\n  }\n\n  @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\n  <div class=\"ng0-table-paging-info ms-auto\">\n    <ng-content select=\"paging-info\">\n      {{\n      _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!,\n      currentPage: $pageIndex!})\n      }}\n    </ng-content>\n  </div>\n  }\n  }\n</ng-template>\n\n<ng-template #nowDataTemplate>\n  <tr class=\"ng0-table-error-row\">\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n      <div class=\"d-flex align-items-baseline\">\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n          {{ \"retry\" | ng0Translate }}\n        </button>\n      </div>\n    </td>\n  </tr>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}.fade-in{animation:fade-in .5s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.DestroyRef }], propDecorators: { _columns: [{
                 type: ContentChildren,
                 args: [TableColumnDirective]