@webilix/ngx-table-m3 0.0.19 → 0.0.22

package/fesm2022/webilix-ngx-table-m3.mjs

@@ -31,10 +31,10 @@ class FilterDateComponent {
     data = inject(FILTER_DATA);
     value = inject(FILTER_VALUE);
     onChange = inject(FILTER_CHANGE);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: FilterDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-date" } }, ngImport: i0, template: "<ngx-calendar-date\n    [value]=\"this.value\"\n    [minDate]=\"this.data.filter.minDate\"\n    [maxDate]=\"this.data.filter.maxDate\"\n    (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n", styles: [""], dependencies: [{ kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: FilterDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-date" } }, ngImport: i0, template: "<ngx-calendar-date\n    [value]=\"this.value\"\n    [minDate]=\"this.data.filter.minDate\"\n    [maxDate]=\"this.data.filter.maxDate\"\n    (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n", styles: [""], dependencies: [{ kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'filter-date' }, imports: [NgxCalendarDateComponent], template: "<ngx-calendar-date\n    [value]=\"this.value\"\n    [minDate]=\"this.data.filter.minDate\"\n    [maxDate]=\"this.data.filter.maxDate\"\n    (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n" }]
         }] });
@@ -90,10 +90,10 @@ class FilterMultiSelectComponent {
             this.value.push(id);
         this.onChange(this.value.length === 0 ? undefined : this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FilterMultiSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-multi-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    @for (item of options; track $index) {\n    <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n        <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n    </mat-checkbox>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: FilterMultiSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-multi-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    @for (item of options; track $index) {\n    <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n        <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n    </mat-checkbox>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'filter-multi-select' }, imports: [MatCheckbox], template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    @for (item of options; track $index) {\n    <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n        <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n    </mat-checkbox>\n    }\n</div>\n" }]
         }], propDecorators: { className: [{
@@ -185,10 +185,10 @@ class FilterNumberComponent {
     updateQuery() {
         this.onChange(this.query && this.mode ? { query: this.query, mode: this.mode } : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FilterNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-number" }, properties: { "className": "this.className" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "fromInput", first: true, predicate: ["fromInput"], descendants: true }, { propertyName: "numberInput", first: true, predicate: ["numberInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-number\">\n    @if (!this.data.filter.mode) {\n    <div class=\"modes\">\n        @for (item of modes; track $index) {\n        <div class=\"mode\" [class.selected]=\"item.type === mode\" (click)=\"setMode(item.type)\">\n            {{ item.title }}\n        </div>\n        }\n    </div>\n    }\n\n    <!-- INPUTS -->\n    <div class=\"inputs\" [style.display]=\"mode ? 'flex' : 'none'\">\n        <!-- BETWEEN -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"fromQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u0642\u0644'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #fromInput\n        />\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"toQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u06A9\u062A\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #toInput\n        />\n        <!-- OTHERS -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"numberQuery\"\n            [placeholder]=\"'\u0645\u0642\u062F\u0627\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(numberInput.value, '')\"\n            #numberInput\n        />\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: FilterNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-number" }, properties: { "className": "this.className" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "fromInput", first: true, predicate: ["fromInput"], descendants: true }, { propertyName: "numberInput", first: true, predicate: ["numberInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-number\">\n    @if (!this.data.filter.mode) {\n    <div class=\"modes\">\n        @for (item of modes; track $index) {\n        <div class=\"mode\" [class.selected]=\"item.type === mode\" (click)=\"setMode(item.type)\">\n            {{ item.title }}\n        </div>\n        }\n    </div>\n    }\n\n    <!-- INPUTS -->\n    <div class=\"inputs\" [style.display]=\"mode ? 'flex' : 'none'\">\n        <!-- BETWEEN -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"fromQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u0642\u0644'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #fromInput\n        />\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"toQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u06A9\u062A\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #toInput\n        />\n        <!-- OTHERS -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"numberQuery\"\n            [placeholder]=\"'\u0645\u0642\u062F\u0627\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(numberInput.value, '')\"\n            #numberInput\n        />\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterNumberComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'filter-number' }, imports: [FormsModule, NgxMaskDirective], providers: [provideNgxMask()], template: "<div class=\"filter-number\">\n    @if (!this.data.filter.mode) {\n    <div class=\"modes\">\n        @for (item of modes; track $index) {\n        <div class=\"mode\" [class.selected]=\"item.type === mode\" (click)=\"setMode(item.type)\">\n            {{ item.title }}\n        </div>\n        }\n    </div>\n    }\n\n    <!-- INPUTS -->\n    <div class=\"inputs\" [style.display]=\"mode ? 'flex' : 'none'\">\n        <!-- BETWEEN -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"fromQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u0642\u0644'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #fromInput\n        />\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"toQuery\"\n            [placeholder]=\"'\u062D\u062F\u0627\u06A9\u062A\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode === 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(fromInput.value, toInput.value)\"\n            #toInput\n        />\n        <!-- OTHERS -->\n        <input\n            type=\"text\"\n            [inputMode]=\"'numeric'\"\n            [ngModel]=\"numberQuery\"\n            [placeholder]=\"'\u0645\u0642\u062F\u0627\u0631'\"\n            class=\"ngx-table-m3-en\"\n            [mask]=\"'separator.0'\"\n            thousandSeparator=\",\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [maxLength]=\"15\"\n            [inputTransformFn]=\"inputTransformFn\"\n            [style.display]=\"mode !== 'BETWEEN' ? 'initial' : 'none'\"\n            (input)=\"setQuery(numberInput.value, '')\"\n            #numberInput\n        />\n    </div>\n</div>\n" }]
         }], propDecorators: { className: [{
@@ -289,10 +289,10 @@ class FilterSearchComponent {
         this.mode = mode;
         this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FilterSearchComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-search" }, properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-search\">\n    <input\n        type=\"text\"\n        [ngModel]=\"query || ''\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateMode($event.value)\">\n        <mat-radio-button [value]=\"'PHRASE'\" [checked]=\"mode === 'PHRASE'\">\n            <div class=\"title\">\u0639\u0628\u0627\u0631\u062A \u06A9\u0627\u0645\u0644</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'ALL'\" [checked]=\"mode === 'ALL'\">\n            <div class=\"title\">\u0647\u0645\u0647 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'EACH'\" [checked]=\"mode === 'EACH'\">\n            <div class=\"title\">\u0647\u0631 \u06A9\u062F\u0627\u0645 \u0627\u0632 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n    </mat-radio-group>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: FilterSearchComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-search" }, properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"filter-search\">\n    <input\n        type=\"text\"\n        [ngModel]=\"query || ''\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateMode($event.value)\">\n        <mat-radio-button [value]=\"'PHRASE'\" [checked]=\"mode === 'PHRASE'\">\n            <div class=\"title\">\u0639\u0628\u0627\u0631\u062A \u06A9\u0627\u0645\u0644</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'ALL'\" [checked]=\"mode === 'ALL'\">\n            <div class=\"title\">\u0647\u0645\u0647 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'EACH'\" [checked]=\"mode === 'EACH'\">\n            <div class=\"title\">\u0647\u0631 \u06A9\u062F\u0627\u0645 \u0627\u0632 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n    </mat-radio-group>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterSearchComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'filter-search' }, imports: [FormsModule, MatRadioButton, MatRadioGroup], template: "<div class=\"filter-search\">\n    <input\n        type=\"text\"\n        [ngModel]=\"query || ''\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateMode($event.value)\">\n        <mat-radio-button [value]=\"'PHRASE'\" [checked]=\"mode === 'PHRASE'\">\n            <div class=\"title\">\u0639\u0628\u0627\u0631\u062A \u06A9\u0627\u0645\u0644</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'ALL'\" [checked]=\"mode === 'ALL'\">\n            <div class=\"title\">\u0647\u0645\u0647 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n        <mat-radio-button [value]=\"'EACH'\" [checked]=\"mode === 'EACH'\">\n            <div class=\"title\">\u0647\u0631 \u06A9\u062F\u0627\u0645 \u0627\u0632 \u06A9\u0644\u0645\u0627\u062A</div>\n        </mat-radio-button>\n    </mat-radio-group>\n</div>\n}\n" }]
         }], propDecorators: { className: [{
@@ -353,10 +353,10 @@ class FilterSelectComponent {
         this.value = id;
         this.onChange(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: FilterSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateValue($event.value)\">\n        @for (item of options; track $index) {\n        <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n            <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n        </mat-radio-button>\n        }\n    </mat-radio-group>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: FilterSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-select" }, properties: { "className": "this.className" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateValue($event.value)\">\n        @for (item of options; track $index) {\n        <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n            <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n        </mat-radio-button>\n        }\n    </mat-radio-group>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'filter-select' }, imports: [MatRadioButton, MatRadioGroup], template: "@if (data.filter.options.length > 20) {\n<div class=\"filter-item-search\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [class.ngx-table-m3-en]=\"data.filter.english\"\n        (input)=\"setOptions(searchInput.value.trim())\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"filter-items\">\n    <mat-radio-group (change)=\"updateValue($event.value)\">\n        @for (item of options; track $index) {\n        <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n            <div class=\"title\" [class.ngx-table-m3-en]=\"data.filter.english\">{{ item.title }}</div>\n        </mat-radio-button>\n        }\n    </mat-radio-group>\n</div>\n" }]
         }], propDecorators: { className: [{
@@ -413,10 +413,10 @@ class FilterComponent {
         if (event.code === 'Enter' && this.value)
             this.closeContainer({ value: this.value });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: FilterComponent, isStandalone: true, selector: "filter", host: { listeners: { "window:keydown": "onKeydown($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"filter-content\">\n    <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</div>\n\n<div class=\"filter-footer\">\n    <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n        \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n    </button>\n    <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n        \u062A\u0627\u06CC\u06CC\u062F\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .filter-content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: FilterComponent, isStandalone: true, selector: "filter", host: { listeners: { "window:keydown": "onKeydown($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"filter-content\">\n    <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</div>\n\n<div class=\"filter-footer\">\n    <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n        \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n    </button>\n    <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n        \u062A\u0627\u06CC\u06CC\u062F\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .filter-content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'filter', host: { '(window:keydown)': 'onKeydown($event)' }, imports: [MatButton, NgComponentOutlet], template: "<div class=\"filter-content\">\n    <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</div>\n\n<div class=\"filter-footer\">\n    <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n        \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n    </button>\n    <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n        \u062A\u0627\u06CC\u06CC\u062F\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .filter-content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}\n"] }]
         }], propDecorators: { className: [{
@@ -464,10 +464,10 @@ class FilterService {
                 .bottomSheet((response) => resolve({ ...filter, value: response.value }), () => resolve(undefined));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2.NgxHelperContainerService }] });
 
@@ -556,10 +556,10 @@ class ViewActionComponent {
         if (result)
             this.router.navigate(result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewActionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewActionComponent, isStandalone: true, selector: "view-action", inputs: { actions: "actions", item: "item", viewConfig: "viewConfig", isMobile: "isMobile" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    class=\"desktop-view\"\n    [style.color]=\"item.isDisabled ? '' : item.color\"\n    [disabled]=\"item.isDisabled\"\n    (click)=\"onClick(item.action)\"\n>\n    {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n    <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\" [class.disabled]=\"item.isDisabled\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button mat-button type=\"button\" class=\"desktop-view\" [matMenuTriggerFor]=\"actionMenu\">\n    {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n    <mat-icon>more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-action-menu\">\n    @for (item of inMenu; track $index) {\n    <!-- DIVIDER -->\n    @if (item === 'DIVIDER') {\n    <mat-divider></mat-divider>\n    }\n\n    <!-- MENU ITEM -->\n    @else {\n    <button\n        mat-menu-item\n        type=\"button\"\n        [class.disabled]=\"item.isDisabled\"\n        [style.color]=\"item.isDisabled ? '' : item.color\"\n        (click)=\"onClick(item.action)\"\n        [disabled]=\"item.isDisabled\"\n    >\n        <span class=\"title\">{{ item.title }}</span>\n        <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n    </button>\n    } }\n</mat-menu>\n}\n", styles: ["::ng-deep .ngx-table-action-menu .title{font-size:90%!important}::ng-deep .ngx-table-action-menu mat-icon{font-size:120%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewActionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewActionComponent, isStandalone: true, selector: "view-action", inputs: { actions: "actions", item: "item", viewConfig: "viewConfig", isMobile: "isMobile" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    class=\"desktop-view\"\n    [style.color]=\"item.isDisabled ? '' : item.color\"\n    [disabled]=\"item.isDisabled\"\n    (click)=\"onClick(item.action)\"\n>\n    {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n    <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\" [class.disabled]=\"item.isDisabled\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button mat-button type=\"button\" class=\"desktop-view\" [matMenuTriggerFor]=\"actionMenu\">\n    {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n    <mat-icon>more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-action-menu\">\n    @for (item of inMenu; track $index) {\n    <!-- DIVIDER -->\n    @if (item === 'DIVIDER') {\n    <mat-divider></mat-divider>\n    }\n\n    <!-- MENU ITEM -->\n    @else {\n    <button\n        mat-menu-item\n        type=\"button\"\n        [class.disabled]=\"item.isDisabled\"\n        [style.color]=\"item.isDisabled ? '' : item.color\"\n        (click)=\"onClick(item.action)\"\n        [disabled]=\"item.isDisabled\"\n    >\n        <span class=\"title\">{{ item.title }}</span>\n        <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n    </button>\n    } }\n</mat-menu>\n}\n", styles: ["::ng-deep .ngx-table-action-menu .title{font-size:90%!important}::ng-deep .ngx-table-action-menu mat-icon{font-size:120%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-action', imports: [MatButton, MatDivider, MatIconButton, MatIcon, MatMenuModule], template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    class=\"desktop-view\"\n    [style.color]=\"item.isDisabled ? '' : item.color\"\n    [disabled]=\"item.isDisabled\"\n    (click)=\"onClick(item.action)\"\n>\n    {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n    <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\" [class.disabled]=\"item.isDisabled\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button mat-button type=\"button\" class=\"desktop-view\" [matMenuTriggerFor]=\"actionMenu\">\n    {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n    <mat-icon>more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-table-action-menu\">\n    @for (item of inMenu; track $index) {\n    <!-- DIVIDER -->\n    @if (item === 'DIVIDER') {\n    <mat-divider></mat-divider>\n    }\n\n    <!-- MENU ITEM -->\n    @else {\n    <button\n        mat-menu-item\n        type=\"button\"\n        [class.disabled]=\"item.isDisabled\"\n        [style.color]=\"item.isDisabled ? '' : item.color\"\n        (click)=\"onClick(item.action)\"\n        [disabled]=\"item.isDisabled\"\n    >\n        <span class=\"title\">{{ item.title }}</span>\n        <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n    </button>\n    } }\n</mat-menu>\n}\n", styles: ["::ng-deep .ngx-table-action-menu .title{font-size:90%!important}::ng-deep .ngx-table-action-menu mat-icon{font-size:120%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
@@ -589,10 +589,10 @@ class ColumnDateComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-date" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-date" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnDateComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-date' }, imports: [NgxHelperDatePipe], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n" }]
         }] });
@@ -610,10 +610,10 @@ class ColumnDurationComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnDurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDurationPipe, name: "ngxHelperDuration" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnDurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperDurationPipe, name: "ngxHelperDuration" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnDurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnDurationComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-duration' }, imports: [NgxHelperDurationPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n" }]
         }] });
@@ -642,10 +642,10 @@ class ColumnFileSizeComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnFileSizeComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-file-size" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperFileSize : { english: config.isEN } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnFileSizeComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-file-size" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperFileSize : { english: config.isEN } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFileSizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnFileSizeComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-file-size' }, imports: [NgxHelperFileSizePipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperFileSize : { english: config.isEN } }}\n</div>\n" }]
         }] });
@@ -663,10 +663,10 @@ class ColumnMobileComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-mobile" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperMobilePipe, name: "ngxHelperMobile" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-mobile" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperMobilePipe, name: "ngxHelperMobile" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnMobileComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-mobile' }, imports: [NgxHelperMobilePipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n" }]
         }] });
@@ -684,10 +684,10 @@ class ColumnNumberComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-number" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-number" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnNumberComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-number' }, imports: [NgxHelperNumberPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"'ltr'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n" }]
         }] });
@@ -705,10 +705,10 @@ class ColumnPeriodComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnPeriodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnPeriodComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-period" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperPeriod }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperPeriodPipe, name: "ngxHelperPeriod" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnPeriodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnPeriodComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-period" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperPeriod }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperPeriodPipe, name: "ngxHelperPeriod" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnPeriodComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnPeriodComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-period' }, imports: [NgxHelperPeriodPipe], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    {{ value | ngxHelperPeriod }}\n</div>\n" }]
         }] });
@@ -733,10 +733,10 @@ class ColumnTextComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-text" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value }}\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-text" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value }}\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnTextComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-text' }, imports: [], template: "<div\n    [style.display]=\"'inline-block'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value }}\n</div>\n" }]
         }] });
@@ -754,10 +754,10 @@ class ColumnWeightComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnWeightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ColumnWeightComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-weight" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperWeightPipe, name: "ngxHelperWeight" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnWeightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ColumnWeightComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-weight" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: NgxHelperWeightPipe, name: "ngxHelperWeight" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnWeightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColumnWeightComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'column-weight' }, imports: [NgxHelperWeightPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [style.direction]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [class.ngx-table-m3-en]=\"config.isEN\"\n    [class.ngx-table-m3-deactive]=\"config.isDeactive\"\n>\n    {{ value | ngxHelperWeight : { short:column.short, english: config.isEN, } }}\n</div>\n" }]
         }] });
@@ -877,10 +877,10 @@ class ViewValueComponent {
             this.copyTimeout = undefined;
         }, 2000);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "className": "this.className", "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "className": "this.className", "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-value', imports: [NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
@@ -929,27 +929,40 @@ class ViewService {
         const iconFn = ngxTable.rows?.icon;
         if (!iconFn)
             return [];
-        return data.map((item) => {
-            const icon = iconFn(item);
-            return typeof icon === 'string' ? { icon } : { icon: icon.icon, color: icon.color || undefined };
+        return data.map((item, index) => {
+            const icon = iconFn(item, index);
+            return typeof icon === 'string'
+                ? { icon }
+                : 'emoji' in icon
+                    ? { icon: '' }
+                    : { icon: icon.icon, color: icon.color || undefined };
+        });
+    }
+    getEmojis(ngxTable, data) {
+        const iconFn = ngxTable.rows?.icon;
+        if (!iconFn)
+            return [];
+        return data.map((item, index) => {
+            const icon = iconFn(item, index);
+            return typeof icon === 'string' ? '' : 'emoji' in icon ? icon.emoji : '';
         });
     }
     getColors(ngxTable, data) {
         const colorFn = ngxTable.rows?.color;
         if (!colorFn)
             return [];
-        return data.map((item) => colorFn(item) || '');
+        return data.map((item, index) => colorFn(item, index) || '');
     }
     getDescriptions(ngxTable, data) {
         const descriptionFn = ngxTable.rows?.description;
         if (!descriptionFn)
             return [];
-        return data.map((item) => descriptionFn(item) || undefined);
+        return data.map((item, index) => descriptionFn(item, index) || undefined);
     }
     getDeactives(ngxTable, data) {
         const deactives = [];
         data.forEach((item, index) => {
-            if (ngxTable.rows?.isDeactive?.(item))
+            if (ngxTable.rows?.isDeactive?.(item, index))
                 deactives.push(index);
         });
         return deactives;
@@ -991,10 +1004,10 @@ class ViewService {
         }
         return orders;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
 
@@ -1051,10 +1064,10 @@ class ViewCardToolbarComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toolbar-container\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n    (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    #toolbarContainer\n>\n    <div class=\"toolbar-items\" #toolbarItems>\n        <!-- ORDER -->\n        @if (orderKeys.length > 0) {\n        <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n            <mat-icon>swap_vert</mat-icon>\n            <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n        </div>\n        <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'after'\" class=\"ngx-table-order-menu\">\n            @for (item of orderKeys; track $index) {\n            <!-- DIVIDER -->\n            @if ($index !== 0) {<mat-divider></mat-divider>}\n\n            <!-- TYPES -->\n            @switch (orders[item].type) {\n            <!-- ORDR -->\n            @case ('ORDER') {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'ASC'\"\n                (click)=\"updateOrder(item, 'ASC')\"\n            >\n                <mat-icon>north</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'DESC'\"\n                (click)=\"updateOrder(item, 'DESC')\"\n            >\n                <mat-icon>south</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            }\n            <!-- ASC, DESC -->\n            @default {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current\"\n                (click)=\"updateOrder(item, orders[item].type)\"\n            >\n                <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            } } }\n        </mat-menu>\n        }\n\n        <!-- CLEAR -->\n        @if (showClear) {\n        <div class=\"item clear\" (click)=\"clearFilter.next()\">\n            <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n            <mat-icon>filter_alt_off</mat-icon>\n        </div>\n\n        }\n\n        <!-- FILTER -->\n        @for (item of filterKeys; track $index) {\n        <div class=\"item\" [class.active]=\"filters[item].value\" (click)=\"updateFilter.next(item)\">\n            <mat-icon>filter_alt</mat-icon>\n            <span>{{ filters[item].title }}</span>\n        </div>\n        }\n    </div>\n</div>\n\n<div\n    class=\"toolbar-seperator\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' + (viewConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-table-m3-toolbar-height) + 2px)'\n    \"\n></div>\n", styles: ["::ng-deep .ngx-table-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-table-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, host: { properties: { "className": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toolbar-container\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n    (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    #toolbarContainer\n>\n    <div class=\"toolbar-items\" #toolbarItems>\n        <!-- ORDER -->\n        @if (orderKeys.length > 0) {\n        <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n            <mat-icon>swap_vert</mat-icon>\n            <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n        </div>\n        <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'after'\" class=\"ngx-table-order-menu\">\n            @for (item of orderKeys; track $index) {\n            <!-- DIVIDER -->\n            @if ($index !== 0) {<mat-divider></mat-divider>}\n\n            <!-- TYPES -->\n            @switch (orders[item].type) {\n            <!-- ORDR -->\n            @case ('ORDER') {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'ASC'\"\n                (click)=\"updateOrder(item, 'ASC')\"\n            >\n                <mat-icon>north</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'DESC'\"\n                (click)=\"updateOrder(item, 'DESC')\"\n            >\n                <mat-icon>south</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            }\n            <!-- ASC, DESC -->\n            @default {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current\"\n                (click)=\"updateOrder(item, orders[item].type)\"\n            >\n                <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            } } }\n        </mat-menu>\n        }\n\n        <!-- CLEAR -->\n        @if (showClear) {\n        <div class=\"item clear\" (click)=\"clearFilter.next()\">\n            <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n            <mat-icon>filter_alt_off</mat-icon>\n        </div>\n\n        }\n\n        <!-- FILTER -->\n        @for (item of filterKeys; track $index) {\n        <div class=\"item\" [class.active]=\"filters[item].value\" (click)=\"updateFilter.next(item)\">\n            <mat-icon>filter_alt</mat-icon>\n            <span>{{ filters[item].title }}</span>\n        </div>\n        }\n    </div>\n</div>\n\n<div\n    class=\"toolbar-seperator\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' + (viewConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-table-m3-toolbar-height) + 2px)'\n    \"\n></div>\n", styles: ["::ng-deep .ngx-table-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-table-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-card-toolbar', imports: [MatDivider, MatIcon, MatMenuModule], template: "<div\n    class=\"toolbar-container\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"viewConfig.stickyView?.top?.mobileView || undefined\"\n    (mousedown)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (mousemove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (mouseup)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    (touchstart)=\"swipe($event, 'START', toolbarContainer, toolbarItems)\"\n    (touchmove)=\"swipe($event, 'MOVE', toolbarContainer, toolbarItems)\"\n    (touchend)=\"swipe($event, 'END', toolbarContainer, toolbarItems)\"\n    #toolbarContainer\n>\n    <div class=\"toolbar-items\" #toolbarItems>\n        <!-- ORDER -->\n        @if (orderKeys.length > 0) {\n        <div class=\"item\" [matMenuTriggerFor]=\"orderMenu\">\n            <mat-icon>swap_vert</mat-icon>\n            <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n        </div>\n        <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'after'\" class=\"ngx-table-order-menu\">\n            @for (item of orderKeys; track $index) {\n            <!-- DIVIDER -->\n            @if ($index !== 0) {<mat-divider></mat-divider>}\n\n            <!-- TYPES -->\n            @switch (orders[item].type) {\n            <!-- ORDR -->\n            @case ('ORDER') {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'ASC'\"\n                (click)=\"updateOrder(item, 'ASC')\"\n            >\n                <mat-icon>north</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'DESC'\"\n                (click)=\"updateOrder(item, 'DESC')\"\n            >\n                <mat-icon>south</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            }\n            <!-- ASC, DESC -->\n            @default {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current\"\n                (click)=\"updateOrder(item, orders[item].type)\"\n            >\n                <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            } } }\n        </mat-menu>\n        }\n\n        <!-- CLEAR -->\n        @if (showClear) {\n        <div class=\"item clear\" (click)=\"clearFilter.next()\">\n            <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n            <mat-icon>filter_alt_off</mat-icon>\n        </div>\n\n        }\n\n        <!-- FILTER -->\n        @for (item of filterKeys; track $index) {\n        <div class=\"item\" [class.active]=\"filters[item].value\" (click)=\"updateFilter.next(item)\">\n            <mat-icon>filter_alt</mat-icon>\n            <span>{{ filters[item].title }}</span>\n        </div>\n        }\n    </div>\n</div>\n\n<div\n    class=\"toolbar-seperator\"\n    [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' + (viewConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-table-m3-toolbar-height) + 2px)'\n    \"\n></div>\n", styles: ["::ng-deep .ngx-table-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-table-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-table-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-table-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"] }]
         }], propDecorators: { className: [{
@@ -1092,6 +1105,7 @@ class ViewCardComponent {
     titleIndex;
     subTitleIndex;
     icons = [];
+    emojis = [];
     colors = [];
     descriptions = [];
     deactives = [];
@@ -1110,6 +1124,7 @@ class ViewCardComponent {
         this.titleIndex = this.viewService.getTitleIndex(this.ngxTable);
         this.subTitleIndex = this.viewService.getSubTitleIndex(this.ngxTable);
         this.icons = this.viewService.getIcons(this.ngxTable, this.data);
+        this.emojis = this.viewService.getEmojis(this.ngxTable, this.data);
         this.colors = this.viewService.getColors(this.ngxTable, this.data);
         this.descriptions = this.viewService.getDescriptions(this.ngxTable, this.data);
         this.deactives = this.viewService.getDeactives(this.ngxTable, this.data);
@@ -1131,12 +1146,12 @@ class ViewCardComponent {
             this.filterChanged.next({ id, value: filter.value });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }, { kind: "component", type: ViewCardToolbarComponent, selector: "view-card-toolbar", inputs: ["orders", "filters", "viewConfig"], outputs: ["orderChanged", "updateFilter", "clearFilter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }, { kind: "component", type: ViewCardToolbarComponent, selector: "view-card-toolbar", inputs: ["orders", "filters", "viewConfig"], outputs: ["orderChanged", "updateFilter", "clearFilter"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n" }]
+            args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
@@ -1201,10 +1216,10 @@ class ViewPaginationComponent {
         const parentHeight = element.parentElement?.offsetHeight;
         this.hasShadow = !!parentHeight && elementPosition < parentHeight;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewPaginationComponent, isStandalone: true, selector: "view-pagination", inputs: { type: "type", pagination: "pagination", viewConfig: "viewConfig", isMobile: "isMobile", stickyBottom: "stickyBottom" }, outputs: { pageChanged: "pageChanged" }, host: { listeners: { "window:scroll": "onScroll($event)" }, properties: { "className": "this.className", "style.position": "this.stylePosition", "style.bottom": "this.styleBottom" } }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"pagination-content\"\n    [class.desktop-view]=\"!isMobile\"\n    [class.mobile-view]=\"isMobile\"\n    [class.has-shadow]=\"hasShadow\"\n>\n    <div class=\"counts\">\n        <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n        <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n    </div>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.total)\"\n    >\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.current + 1)\"\n    >\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n    <mat-menu #pageMenu=\"matMenu\" class=\"ngx-table-m3-pagination\">\n        @for (page of pages; track $index) {\n        <button\n            mat-menu-item\n            type=\"button\"\n            [disabled]=\"page === pagination.page.current\"\n            class=\"ngx-table-m3-pagination-item\"\n            (click)=\"pageChanged.next(page)\"\n        >\n            {{ page | number }}\n        </button>\n        }\n    </mat-menu>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === 1\"\n        (click)=\"pageChanged.next(pagination.page.current - 1)\"\n    >\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n", styles: ["::ng-deep .ngx-table-m3-pagination .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-m3-pagination-item{text-align:center!important}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewPaginationComponent, isStandalone: true, selector: "view-pagination", inputs: { type: "type", pagination: "pagination", viewConfig: "viewConfig", isMobile: "isMobile", stickyBottom: "stickyBottom" }, outputs: { pageChanged: "pageChanged" }, host: { listeners: { "window:scroll": "onScroll($event)" }, properties: { "className": "this.className", "style.position": "this.stylePosition", "style.bottom": "this.styleBottom" } }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"pagination-content\"\n    [class.desktop-view]=\"!isMobile\"\n    [class.mobile-view]=\"isMobile\"\n    [class.has-shadow]=\"hasShadow\"\n>\n    <div class=\"counts\">\n        <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n        <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n    </div>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.total)\"\n    >\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.current + 1)\"\n    >\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n    <mat-menu #pageMenu=\"matMenu\" class=\"ngx-table-m3-pagination\">\n        @for (page of pages; track $index) {\n        <button\n            mat-menu-item\n            type=\"button\"\n            [disabled]=\"page === pagination.page.current\"\n            class=\"ngx-table-m3-pagination-item\"\n            (click)=\"pageChanged.next(page)\"\n        >\n            {{ page | number }}\n        </button>\n        }\n    </mat-menu>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === 1\"\n        (click)=\"pageChanged.next(pagination.page.current - 1)\"\n    >\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n", styles: ["::ng-deep .ngx-table-m3-pagination .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-m3-pagination-item{text-align:center!important}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-pagination', host: { '(window:scroll)': 'onScroll($event)' }, imports: [DecimalPipe, MatIconButton, MatIcon, MatMenuModule], template: "<div\n    class=\"pagination-content\"\n    [class.desktop-view]=\"!isMobile\"\n    [class.mobile-view]=\"isMobile\"\n    [class.has-shadow]=\"hasShadow\"\n>\n    <div class=\"counts\">\n        <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n        <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n    </div>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.total)\"\n    >\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.current + 1)\"\n    >\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n    <mat-menu #pageMenu=\"matMenu\" class=\"ngx-table-m3-pagination\">\n        @for (page of pages; track $index) {\n        <button\n            mat-menu-item\n            type=\"button\"\n            [disabled]=\"page === pagination.page.current\"\n            class=\"ngx-table-m3-pagination-item\"\n            (click)=\"pageChanged.next(page)\"\n        >\n            {{ page | number }}\n        </button>\n        }\n    </mat-menu>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === 1\"\n        (click)=\"pageChanged.next(pagination.page.current - 1)\"\n    >\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</div>\n", styles: ["::ng-deep .ngx-table-m3-pagination .mat-mdc-menu-content{padding:0}::ng-deep .ngx-table-m3-pagination-item{text-align:center!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { className: [{
@@ -1250,6 +1265,7 @@ class ViewTableComponent {
     titleIndex;
     subTitleIndex;
     icons = [];
+    emojis = [];
     colors = [];
     descriptions = [];
     deactives = [];
@@ -1266,6 +1282,7 @@ class ViewTableComponent {
         this.titleIndex = this.viewService.getTitleIndex(this.ngxTable);
         this.subTitleIndex = this.viewService.getSubTitleIndex(this.ngxTable);
         this.icons = this.viewService.getIcons(this.ngxTable, this.data);
+        this.emojis = this.viewService.getEmojis(this.ngxTable, this.data);
         this.colors = this.viewService.getColors(this.ngxTable, this.data);
         this.descriptions = this.viewService.getDescriptions(this.ngxTable, this.data);
         this.deactives = this.viewService.getDeactives(this.ngxTable, this.data);
@@ -1304,20 +1321,20 @@ class ViewTableComponent {
         this.filters[id] = { ...this.filters[id], value: undefined };
         this.filterChanged.next({ id, value: undefined });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewTableComponent, deps: [{ token: ViewService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: ViewTableComponent, isStandalone: true, selector: "view-table", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n                            {{ item.value }}\n                        </div>\n                        <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n                            <mat-icon>close</mat-icon>\n                        </div>\n                    </div>\n                    }\n\n                    <!-- CLEAR ALL -->\n                    @if (activeFilters.length > 2) {\n                    <div class=\"item clear\" (click)=\"filterCleared.next()\">\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n                    </div>\n                    }\n                </div>\n            </th>\n        </tr>\n        }\n\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th></th>\n            }\n\n            <!-- COLUMNS -->\n            @for (column of ngxTable.columns; track $index) {\n            <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n                <div\n                    class=\"column\"\n                    [class.flex-end]=\"column.textAlign === 'LEFT'\"\n                    [class.flex-center]=\"column.textAlign === 'CENTER'\"\n                >\n                    <div class=\"title\">{{ column.title }}</div>\n\n                    <!-- ORDER -->\n                    @if (column.tools && orders[column.tools.id]) {\n                    <mat-icon\n                        (click)=\"updateOrder(column.tools.id)\"\n                        [style.cursor]=\"\n                            orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n                                ? 'pointer'\n                                : 'default'\n                        \"\n                    >\n                        {{\n                            orders[column.tools.id].current === 'ASC'\n                                ? 'north'\n                                : orders[column.tools.id].current === 'DESC'\n                                ? 'south'\n                                : 'swap_vert'\n                        }}\n                    </mat-icon>\n                    }\n\n                    <!-- FILTER -->\n                    @if (column.tools && filters[column.tools.id]) {\n                    <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n                    }\n                </div>\n            </th>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <th></th>\n            }\n        </tr>\n    </thead>\n\n    <!-- BODY -->\n    <tbody>\n        @for (item of data; track $index; let dataIndex = $index) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\">\n                <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                    {{ icons[$index].icon }}\n                </mat-icon>\n            </td>\n            }\n\n            <!-- DATA -->\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <td>\n                <view-value\n                    [column]=\"column\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n                ></view-value>\n            </td>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <td class=\"action\">\n                <view-action\n                    [actions]=\"ngxTable.actions || []\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isMobile]=\"false\"\n                ></view-action>\n            </td>\n            }\n        </tr>\n\n        <!-- DESCRIPTION -->\n        @if (descriptions[dataIndex]) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            @if (hasIcon) {\n            <td class=\"description\"></td>\n            }\n            <td\n                class=\"description\"\n                [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></td>\n        </tr>\n        } }\n    </tbody>\n</table>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewTableComponent, deps: [{ token: ViewService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ViewTableComponent, isStandalone: true, selector: "view-table", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n                            {{ item.value }}\n                        </div>\n                        <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n                            <mat-icon>close</mat-icon>\n                        </div>\n                    </div>\n                    }\n\n                    <!-- CLEAR ALL -->\n                    @if (activeFilters.length > 2) {\n                    <div class=\"item clear\" (click)=\"filterCleared.next()\">\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n                    </div>\n                    }\n                </div>\n            </th>\n        </tr>\n        }\n\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th></th>\n            }\n\n            <!-- COLUMNS -->\n            @for (column of ngxTable.columns; track $index) {\n            <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n                <div\n                    class=\"column\"\n                    [class.flex-end]=\"column.textAlign === 'LEFT'\"\n                    [class.flex-center]=\"column.textAlign === 'CENTER'\"\n                >\n                    <div class=\"title\">{{ column.title }}</div>\n\n                    <!-- ORDER -->\n                    @if (column.tools && orders[column.tools.id]) {\n                    <mat-icon\n                        (click)=\"updateOrder(column.tools.id)\"\n                        [style.cursor]=\"\n                            orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n                                ? 'pointer'\n                                : 'default'\n                        \"\n                    >\n                        {{\n                            orders[column.tools.id].current === 'ASC'\n                                ? 'north'\n                                : orders[column.tools.id].current === 'DESC'\n                                ? 'south'\n                                : 'swap_vert'\n                        }}\n                    </mat-icon>\n                    }\n\n                    <!-- FILTER -->\n                    @if (column.tools && filters[column.tools.id]) {\n                    <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n                    }\n                </div>\n            </th>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <th></th>\n            }\n        </tr>\n    </thead>\n\n    <!-- BODY -->\n    <tbody>\n        @for (item of data; track $index; let dataIndex = $index) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <td class=\"icon\">\n                <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                    {{ icons[$index].icon }}\n                </mat-icon>\n            </td>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- DATA -->\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <td>\n                <view-value\n                    [column]=\"column\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n                ></view-value>\n            </td>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <td class=\"action\">\n                <view-action\n                    [actions]=\"ngxTable.actions || []\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isMobile]=\"false\"\n                ></view-action>\n            </td>\n            }\n        </tr>\n\n        <!-- DESCRIPTION -->\n        @if (descriptions[dataIndex]) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            @if (hasIcon) {\n            <td class=\"description\"></td>\n            }\n            <td\n                class=\"description\"\n                [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></td>\n        </tr>\n        } }\n    </tbody>\n</table>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }, { kind: "component", type: ViewActionComponent, selector: "view-action", inputs: ["actions", "item", "viewConfig", "isMobile"] }, { kind: "component", type: ViewValueComponent, selector: "view-value", inputs: ["column", "item", "viewConfig", "isDeactive", "isCard", "isCardTitle", "isCardSubTitle"] }], animations: [
             trigger('toolbar', [
                 transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
             ]),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ViewTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-table', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent], providers: [FilterService, ViewService], animations: [
                         trigger('toolbar', [
                             transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
                         ]),
-                    ], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n                            {{ item.value }}\n                        </div>\n                        <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n                            <mat-icon>close</mat-icon>\n                        </div>\n                    </div>\n                    }\n\n                    <!-- CLEAR ALL -->\n                    @if (activeFilters.length > 2) {\n                    <div class=\"item clear\" (click)=\"filterCleared.next()\">\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n                    </div>\n                    }\n                </div>\n            </th>\n        </tr>\n        }\n\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th></th>\n            }\n\n            <!-- COLUMNS -->\n            @for (column of ngxTable.columns; track $index) {\n            <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n                <div\n                    class=\"column\"\n                    [class.flex-end]=\"column.textAlign === 'LEFT'\"\n                    [class.flex-center]=\"column.textAlign === 'CENTER'\"\n                >\n                    <div class=\"title\">{{ column.title }}</div>\n\n                    <!-- ORDER -->\n                    @if (column.tools && orders[column.tools.id]) {\n                    <mat-icon\n                        (click)=\"updateOrder(column.tools.id)\"\n                        [style.cursor]=\"\n                            orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n                                ? 'pointer'\n                                : 'default'\n                        \"\n                    >\n                        {{\n                            orders[column.tools.id].current === 'ASC'\n                                ? 'north'\n                                : orders[column.tools.id].current === 'DESC'\n                                ? 'south'\n                                : 'swap_vert'\n                        }}\n                    </mat-icon>\n                    }\n\n                    <!-- FILTER -->\n                    @if (column.tools && filters[column.tools.id]) {\n                    <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n                    }\n                </div>\n            </th>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <th></th>\n            }\n        </tr>\n    </thead>\n\n    <!-- BODY -->\n    <tbody>\n        @for (item of data; track $index; let dataIndex = $index) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\">\n                <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                    {{ icons[$index].icon }}\n                </mat-icon>\n            </td>\n            }\n\n            <!-- DATA -->\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <td>\n                <view-value\n                    [column]=\"column\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n                ></view-value>\n            </td>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <td class=\"action\">\n                <view-action\n                    [actions]=\"ngxTable.actions || []\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isMobile]=\"false\"\n                ></view-action>\n            </td>\n            }\n        </tr>\n\n        <!-- DESCRIPTION -->\n        @if (descriptions[dataIndex]) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            @if (hasIcon) {\n            <td class=\"description\"></td>\n            }\n            <td\n                class=\"description\"\n                [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></td>\n        </tr>\n        } }\n    </tbody>\n</table>\n" }]
+                    ], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.top?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th class=\"active-filters\" [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\">\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div class=\"value\" (click)=\"updateFilter(item.id)\" [class.ngx-table-m3-en]=\"item.english\">\n                            {{ item.value }}\n                        </div>\n                        <div class=\"icon\" (click)=\"clearFilter(item.id)\">\n                            <mat-icon>close</mat-icon>\n                        </div>\n                    </div>\n                    }\n\n                    <!-- CLEAR ALL -->\n                    @if (activeFilters.length > 2) {\n                    <div class=\"item clear\" (click)=\"filterCleared.next()\">\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <div class=\"icon\"><mat-icon>filter_alt_off</mat-icon></div>\n                    </div>\n                    }\n                </div>\n            </th>\n        </tr>\n        }\n\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th></th>\n            }\n\n            <!-- COLUMNS -->\n            @for (column of ngxTable.columns; track $index) {\n            <th [style.text-align]=\"(column.textAlign || 'RIGHT').toLowerCase()\">\n                <div\n                    class=\"column\"\n                    [class.flex-end]=\"column.textAlign === 'LEFT'\"\n                    [class.flex-center]=\"column.textAlign === 'CENTER'\"\n                >\n                    <div class=\"title\">{{ column.title }}</div>\n\n                    <!-- ORDER -->\n                    @if (column.tools && orders[column.tools.id]) {\n                    <mat-icon\n                        (click)=\"updateOrder(column.tools.id)\"\n                        [style.cursor]=\"\n                            orders[column.tools.id].type === 'ORDER' || !orders[column.tools.id].current\n                                ? 'pointer'\n                                : 'default'\n                        \"\n                    >\n                        {{\n                            orders[column.tools.id].current === 'ASC'\n                                ? 'north'\n                                : orders[column.tools.id].current === 'DESC'\n                                ? 'south'\n                                : 'swap_vert'\n                        }}\n                    </mat-icon>\n                    }\n\n                    <!-- FILTER -->\n                    @if (column.tools && filters[column.tools.id]) {\n                    <mat-icon [style.cursor]=\"'pointer'\" (click)=\"updateFilter(column.tools.id)\">filter_alt</mat-icon>\n                    }\n                </div>\n            </th>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <th></th>\n            }\n        </tr>\n    </thead>\n\n    <!-- BODY -->\n    <tbody>\n        @for (item of data; track $index; let dataIndex = $index) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <td class=\"icon\">\n                <mat-icon [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                    {{ icons[$index].icon }}\n                </mat-icon>\n            </td>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- DATA -->\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <td>\n                <view-value\n                    [column]=\"column\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"columnIndex === titleIndex && deactives.includes(dataIndex)\"\n                ></view-value>\n            </td>\n            }\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <td class=\"action\">\n                <view-action\n                    [actions]=\"ngxTable.actions || []\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isMobile]=\"false\"\n                ></view-action>\n            </td>\n            }\n        </tr>\n\n        <!-- DESCRIPTION -->\n        @if (descriptions[dataIndex]) {\n        <tr\n            [style.color]=\"colors[dataIndex]\"\n            [class.odd-row]=\"viewConfig.alternateRows && dataIndex % 2 === 1\"\n            [class.even-row]=\"viewConfig.alternateRows && dataIndex % 2 === 0\"\n        >\n            @if (hasIcon) {\n            <td class=\"description\"></td>\n            }\n            <td\n                class=\"description\"\n                [colSpan]=\"ngxTable.columns.length + (hasAction ? 1 : 0)\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></td>\n        </tr>\n        } }\n    </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: ViewService }, { type: FilterService }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
@@ -1410,6 +1427,7 @@ class NgxTableComponent {
         this.viewConfig = {
             alternateRows: !!this.config?.alternateRows,
             iconSize: `${this.config?.iconSize || 24}px`,
+            emojiSize: `${this.config?.emojiSize || 19}px`,
             actionMenuTitle: this.config?.actionMenuTitle || 'امکانات',
             stickyView: this.config?.stickyView
                 ? {
@@ -1472,10 +1490,10 @@ class NgxTableComponent {
         this.setQueryParams();
         this.filterChanged.next(this.filter);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NgxTableComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: FilterService }, { token: ViewService }, { token: NGX_TABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: NgxTableComponent, isStandalone: true, selector: "ngx-table", inputs: { loading: "loading", ngxTable: "ngxTable", data: "data", pagination: "pagination" }, outputs: { filterChanged: "filterChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n    <ngx-helper-loader [mode]=\"'SPINNER'\"></ngx-helper-loader>\n</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length <= 0 ) {\n<div class=\"ngx-table-m3-empty\">\u0633\u062A\u0648\u0646\u200C\u0647\u0627\u06CC \u062C\u062F\u0648\u0644 \u0628\u0647 \u0635\u0648\u0631\u062A \u0635\u062D\u06CC\u062D \u0645\u0634\u062E\u0635 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length > 0 && data.length === 0 && !hasFilter) {\n<div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && ngxTable.columns.length > 0 && (data.length > 0 || hasFilter)) {\n<content class=\"ngx-table-m3\">\n    <!-- DESKTOP -->\n    @if (!isMobile) {\n    <view-table\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-table>\n    }\n\n    <!-- MOBILE -->\n    @if (isMobile) {\n    <view-card\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-card>\n    }\n\n    <!-- PAGINATION -->\n    @if (pagination && pagination.page.total> 1) {\n    <view-pagination\n        [type]=\"ngxTable.type\"\n        [pagination]=\"pagination\"\n        [viewConfig]=\"viewConfig\"\n        [isMobile]=\"isMobile\"\n        [stickyBottom]=\"viewConfig.stickyView?.bottom\"\n        (pageChanged)=\"pageChanged($event)\"\n    ></view-pagination>\n    }\n\n    <!-- EMPTY -->\n    @if ( data.length === 0) {\n    <div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n    }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"], dependencies: [{ kind: "component", type: NgxHelperLoaderComponent, selector: "ngx-helper-loader", inputs: ["mode", "size", "color", "padding", "margin"] }, { kind: "component", type: ViewCardComponent, selector: "view-card", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }, { kind: "component", type: ViewPaginationComponent, selector: "view-pagination", inputs: ["type", "pagination", "viewConfig", "isMobile", "stickyBottom"], outputs: ["pageChanged"] }, { kind: "component", type: ViewTableComponent, selector: "view-table", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxTableComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: FilterService }, { token: ViewService }, { token: NGX_TABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgxTableComponent, isStandalone: true, selector: "ngx-table", inputs: { loading: "loading", ngxTable: "ngxTable", data: "data", pagination: "pagination" }, outputs: { filterChanged: "filterChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n    <ngx-helper-loader [mode]=\"'SPINNER'\"></ngx-helper-loader>\n</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length <= 0 ) {\n<div class=\"ngx-table-m3-empty\">\u0633\u062A\u0648\u0646\u200C\u0647\u0627\u06CC \u062C\u062F\u0648\u0644 \u0628\u0647 \u0635\u0648\u0631\u062A \u0635\u062D\u06CC\u062D \u0645\u0634\u062E\u0635 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length > 0 && data.length === 0 && !hasFilter) {\n<div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && ngxTable.columns.length > 0 && (data.length > 0 || hasFilter)) {\n<content class=\"ngx-table-m3\">\n    <!-- DESKTOP -->\n    @if (!isMobile) {\n    <view-table\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-table>\n    }\n\n    <!-- MOBILE -->\n    @if (isMobile) {\n    <view-card\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-card>\n    }\n\n    <!-- PAGINATION -->\n    @if (pagination && pagination.page.total> 1) {\n    <view-pagination\n        [type]=\"ngxTable.type\"\n        [pagination]=\"pagination\"\n        [viewConfig]=\"viewConfig\"\n        [isMobile]=\"isMobile\"\n        [stickyBottom]=\"viewConfig.stickyView?.bottom\"\n        (pageChanged)=\"pageChanged($event)\"\n    ></view-pagination>\n    }\n\n    <!-- EMPTY -->\n    @if ( data.length === 0) {\n    <div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n    }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"], dependencies: [{ kind: "component", type: NgxHelperLoaderComponent, selector: "ngx-helper-loader", inputs: ["mode", "size", "color", "padding", "margin"] }, { kind: "component", type: ViewCardComponent, selector: "view-card", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }, { kind: "component", type: ViewPaginationComponent, selector: "view-pagination", inputs: ["type", "pagination", "viewConfig", "isMobile", "stickyBottom"], outputs: ["pageChanged"] }, { kind: "component", type: ViewTableComponent, selector: "view-table", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NgxTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-table', host: { '(window:resize)': 'onResize($event)' }, imports: [NgxHelperLoaderComponent, ViewCardComponent, ViewPaginationComponent, ViewTableComponent], providers: [FilterService, ViewService], template: "@if (loading) {\n<div class=\"ngx-table-m3-loader\">\n    <ngx-helper-loader [mode]=\"'SPINNER'\"></ngx-helper-loader>\n</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length <= 0 ) {\n<div class=\"ngx-table-m3-empty\">\u0633\u062A\u0648\u0646\u200C\u0647\u0627\u06CC \u062C\u062F\u0648\u0644 \u0628\u0647 \u0635\u0648\u0631\u062A \u0635\u062D\u06CC\u062D \u0645\u0634\u062E\u0635 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- EMPTY -->\n@if (!loading && ngxTable.columns.length > 0 && data.length === 0 && !hasFilter) {\n<div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && ngxTable.columns.length > 0 && (data.length > 0 || hasFilter)) {\n<content class=\"ngx-table-m3\">\n    <!-- DESKTOP -->\n    @if (!isMobile) {\n    <view-table\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-table>\n    }\n\n    <!-- MOBILE -->\n    @if (isMobile) {\n    <view-card\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-card>\n    }\n\n    <!-- PAGINATION -->\n    @if (pagination && pagination.page.total> 1) {\n    <view-pagination\n        [type]=\"ngxTable.type\"\n        [pagination]=\"pagination\"\n        [viewConfig]=\"viewConfig\"\n        [isMobile]=\"isMobile\"\n        [stickyBottom]=\"viewConfig.stickyView?.bottom\"\n        (pageChanged)=\"pageChanged($event)\"\n    ></view-pagination>\n    }\n\n    <!-- EMPTY -->\n    @if ( data.length === 0) {\n    <div class=\"ngx-table-m3-empty\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n    }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: FilterService }, { type: ViewService }, { type: undefined, decorators: [{