@webilix/ngx-table-m3 0.0.1 → 0.0.2

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

@@ -68,6 +68,7 @@ class FilterMultiSelectComponent {
     data = inject(FILTER_DATA);
     value = inject(FILTER_VALUE);
     onChange = inject(FILTER_CHANGE);
+    searchQuery = '';
     updateValue(id, checked) {
         this.value = this.value || [];
         if (!checked)
@@ -77,11 +78,11 @@ class FilterMultiSelectComponent {
         this.onChange(this.value.length === 0 ? undefined : this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterMultiSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-multi-select" } }, ngImport: i0, template: "@for (item of data.filter.options; track $index) {\n<mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n    <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n        {{ item.title }}\n    </div>\n</mat-checkbox>\n}\n", styles: ["mat-checkbox{display:block;padding:.5rem}mat-checkbox .title{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterMultiSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-multi-select" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"search\" [style.border-color]=\"data.viewConfig.borderColor\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"searchQuery = searchInput.value.trim()\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"items\">\n    @for (item of data.filter.options; track $index) {\n    <!-- CHECK VIEW -->\n    @if ((value || []).includes(item.id) || !searchQuery || item.title.includes(searchQuery)) {\n    <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n        <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n            {{ item.title }}\n        </div>\n    </mat-checkbox>\n    } }\n</div>\n", styles: [":host{display:block;position:relative}:host .search{display:flex;position:sticky;top:0;border-bottom:1px solid transparent;background-color:var(--surface-container-low);padding:1rem;z-index:1}:host .search input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}:host .items{padding:.5rem}:host .items mat-checkbox{display:block}:host .items mat-checkbox .title{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0.3", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'filter-multi-select' }, imports: [NgClass, MatCheckbox], template: "@for (item of data.filter.options; track $index) {\n<mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n    <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n        {{ item.title }}\n    </div>\n</mat-checkbox>\n}\n", styles: ["mat-checkbox{display:block;padding:.5rem}mat-checkbox .title{cursor:pointer}\n"] }]
+            args: [{ host: { selector: 'filter-multi-select' }, imports: [NgClass, MatCheckbox], template: "@if (data.filter.options.length > 20) {\n<div class=\"search\" [style.border-color]=\"data.viewConfig.borderColor\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"searchQuery = searchInput.value.trim()\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"items\">\n    @for (item of data.filter.options; track $index) {\n    <!-- CHECK VIEW -->\n    @if ((value || []).includes(item.id) || !searchQuery || item.title.includes(searchQuery)) {\n    <mat-checkbox [checked]=\"(value || []).includes(item.id)\" (change)=\"updateValue(item.id, $event.checked)\">\n        <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n            {{ item.title }}\n        </div>\n    </mat-checkbox>\n    } }\n</div>\n", styles: [":host{display:block;position:relative}:host .search{display:flex;position:sticky;top:0;border-bottom:1px solid transparent;background-color:var(--surface-container-low);padding:1rem;z-index:1}:host .search input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}:host .items{padding:.5rem}:host .items mat-checkbox{display:block}:host .items mat-checkbox .title{cursor:pointer}\n"] }]
         }] });
 
 class FilterMultiSelectMethods extends FilterMethods {
@@ -133,11 +134,11 @@ class FilterSearchComponent {
         this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterSearchComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-search" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"input\">\n    <input\n        [ngModel]=\"query || ''\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\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}\n", styles: [".input{display:flex;margin:1rem}.input input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}mat-radio-group{display:flex;flex-direction:column;padding-bottom:1rem}mat-radio-group mat-radio-button{padding:0 .5rem;border-top:1px solid transparent}mat-radio-group mat-radio-button .title{cursor:pointer}mat-radio-group mat-radio-button:first-of-type{border-top-width:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterSearchComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-search" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"input\">\n    <input\n        type=\"text\"\n        [ngModel]=\"query || ''\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\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}\n", styles: [".input{display:flex;margin:1rem}.input input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}mat-radio-group{display:flex;flex-direction:column;padding-bottom:1rem}mat-radio-group mat-radio-button{padding:0 .5rem;border-top:1px solid transparent}mat-radio-group mat-radio-button .title{cursor:pointer}mat-radio-group mat-radio-button:first-of-type{border-top-width:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0.3", ngImport: i0, type: FilterSearchComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'filter-search' }, imports: [NgClass, FormsModule, MatRadioButton, MatRadioGroup], template: "<div class=\"input\">\n    <input\n        [ngModel]=\"query || ''\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\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}\n", styles: [".input{display:flex;margin:1rem}.input input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}mat-radio-group{display:flex;flex-direction:column;padding-bottom:1rem}mat-radio-group mat-radio-button{padding:0 .5rem;border-top:1px solid transparent}mat-radio-group mat-radio-button .title{cursor:pointer}mat-radio-group mat-radio-button:first-of-type{border-top-width:0}\n"] }]
+            args: [{ host: { selector: 'filter-search' }, imports: [NgClass, FormsModule, MatRadioButton, MatRadioGroup], template: "<div class=\"input\">\n    <input\n        type=\"text\"\n        [ngModel]=\"query || ''\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"updateQuery(searchInput.value)\"\n        #searchInput\n    />\n</div>\n\n@if (!data.filter.mode) {\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}\n", styles: [".input{display:flex;margin:1rem}.input input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}mat-radio-group{display:flex;flex-direction:column;padding-bottom:1rem}mat-radio-group mat-radio-button{padding:0 .5rem;border-top:1px solid transparent}mat-radio-group mat-radio-button .title{cursor:pointer}mat-radio-group mat-radio-button:first-of-type{border-top-width:0}\n"] }]
         }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -175,12 +176,17 @@ class FilterSelectComponent {
     data = inject(FILTER_DATA);
     value = inject(FILTER_VALUE);
     onChange = inject(FILTER_CHANGE);
+    searchQuery = '';
+    updateValue(id) {
+        this.value = id;
+        this.onChange(this.value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-select" } }, ngImport: i0, template: "<mat-radio-group (change)=\"onChange($event.value)\">\n    @for (item of data.filter.options; track $index) {\n    <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n        <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n            {{ item.title }}\n        </div>\n    </mat-radio-button>\n    }\n</mat-radio-group>\n", styles: [":host{display:block;padding:.5rem}mat-radio-group{display:flex;flex-direction:column}mat-radio-group mat-radio-button .title{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-select" } }, ngImport: i0, template: "@if (data.filter.options.length > 20) {\n<div class=\"search\" [style.border-color]=\"data.viewConfig.borderColor\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"searchQuery = searchInput.value.trim()\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"items\">\n    <mat-radio-group (change)=\"updateValue($event.value)\">\n        @for (item of data.filter.options; track $index) {\n        <!-- CHECK VIEW -->\n        @if (value === item.id || !searchQuery || item.title.includes(searchQuery)) {\n        <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n            <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n                {{ item.title }}\n            </div>\n        </mat-radio-button>\n        } }\n    </mat-radio-group>\n</div>\n", styles: [":host{display:block;position:relative}:host .search{display:flex;position:sticky;top:0;border-bottom:1px solid transparent;background-color:var(--surface-container-low);padding:1rem;z-index:1}:host .search input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}:host .items{padding:.5rem}:host .items mat-radio-group{display:flex;flex-direction:column}:host .items mat-radio-group mat-radio-button .title{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0.3", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'filter-select' }, imports: [NgClass, MatRadioButton, MatRadioGroup], template: "<mat-radio-group (change)=\"onChange($event.value)\">\n    @for (item of data.filter.options; track $index) {\n    <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n        <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n            {{ item.title }}\n        </div>\n    </mat-radio-button>\n    }\n</mat-radio-group>\n", styles: [":host{display:block;padding:.5rem}mat-radio-group{display:flex;flex-direction:column}mat-radio-group mat-radio-button .title{cursor:pointer}\n"] }]
+            args: [{ host: { selector: 'filter-select' }, imports: [NgClass, MatRadioButton, MatRadioGroup], template: "@if (data.filter.options.length > 20) {\n<div class=\"search\" [style.border-color]=\"data.viewConfig.borderColor\">\n    <input\n        type=\"text\"\n        [placeholder]=\"'\u062C\u0633\u062A\u062C\u0648'\"\n        [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\"\n        [style.color]=\"data.viewConfig.inputText\"\n        [style.background-color]=\"data.viewConfig.inputBackground\"\n        [style.border-color]=\"data.viewConfig.borderColor\"\n        [style.direction]=\"data.filter.english ? 'ltr' : 'rtl'\"\n        (input)=\"searchQuery = searchInput.value.trim()\"\n        #searchInput\n    />\n</div>\n}\n\n<div class=\"items\">\n    <mat-radio-group (change)=\"updateValue($event.value)\">\n        @for (item of data.filter.options; track $index) {\n        <!-- CHECK VIEW -->\n        @if (value === item.id || !searchQuery || item.title.includes(searchQuery)) {\n        <mat-radio-button [value]=\"item.id\" [checked]=\"item.id === value\">\n            <div class=\"title\" [ngClass]=\"data.filter.english ? data.viewConfig.enClass : ''\">\n                {{ item.title }}\n            </div>\n        </mat-radio-button>\n        } }\n    </mat-radio-group>\n</div>\n", styles: [":host{display:block;position:relative}:host .search{display:flex;position:sticky;top:0;border-bottom:1px solid transparent;background-color:var(--surface-container-low);padding:1rem;z-index:1}:host .search input{padding:.75rem .5rem;border-radius:8px;border-width:0;border-bottom:1px solid transparent;outline:none;width:100%}:host .items{padding:.5rem}:host .items mat-radio-group{display:flex;flex-direction:column}:host .items mat-radio-group mat-radio-button .title{cursor:pointer}\n"] }]
         }] });
 
 class FilterSelectMethods extends FilterMethods {
@@ -419,11 +425,11 @@ class ColumnDurationComponent {
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnDurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperDurationPipe, name: "ngxHelperDuration" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnDurationComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-duration" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperDurationPipe, name: "ngxHelperDuration" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnDurationComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'column-duration' }, imports: [NgClass, NgxHelperDurationPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n" }]
+            args: [{ host: { selector: 'column-duration' }, imports: [NgClass, NgxHelperDurationPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperDuration : { english: config.isEN, format: column.format } }}\n</div>\n" }]
         }] });
 
 class ColumnDurationMethods extends ColumnMethods {
@@ -451,11 +457,11 @@ class ColumnMobileComponent {
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-mobile" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperMobilePipe, name: "ngxHelperMobile" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-mobile" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"'ltr'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperMobilePipe, name: "ngxHelperMobile" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnMobileComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'column-mobile' }, imports: [NgClass, NgxHelperMobilePipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n" }]
+            args: [{ host: { selector: 'column-mobile' }, imports: [NgClass, NgxHelperMobilePipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"'ltr'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperMobile }}\n</div>\n" }]
         }] });
 
 class ColumnMobileMethods extends ColumnMethods {
@@ -493,11 +499,11 @@ class ColumnTextComponent {
     value = inject(COLUMN_VALUE);
     config = inject(COLUMN_CONFIG);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-text" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-text" } }, ngImport: i0, template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTextComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'column-text' }, imports: [NgClass], template: "<div\n    [style.display]=\"'inline-block'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value }}\n</div>\n" }]
+            args: [{ host: { selector: 'column-text' }, imports: [NgClass], template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"config.isEN ? 'ltr' : 'rtl'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value }}\n</div>\n" }]
         }] });
 
 class ColumnTextMethods extends ColumnMethods {
@@ -614,11 +620,11 @@ class ViewValueComponent {
         }, 2000);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div [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=\"subvalue\" [ngClass]=\"[subValue.isEN ? viewConfig.enClass : '']\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [".value{display:inline-flex;align-items:center}.value mat-icon{font-size:100%;padding:0 .5rem}.subvalue{font-size:85%;font-weight:400;opacity:.5}.card-title{font-weight:500}.card-sub-title{font-size:85%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div [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=\"subvalue\" [dir]=\"subValue.isEN ? 'ltr' : 'rtl'\" [ngClass]=\"[subValue.isEN ? viewConfig.enClass : '']\">\n        {{ subValue.value }}\n    </div>\n    }\n</div>\n}\n", styles: [".value{display:inline-flex;align-items:center}.value mat-icon{font-size:100%;padding:0 .5rem}.subvalue{font-size:85%;font-weight:400;opacity:.5}.card-title{font-weight:500}.card-sub-title{font-size:85%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.0.3", ngImport: i0, type: ViewValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'view-value', imports: [NgClass, NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div [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=\"subvalue\" [ngClass]=\"[subValue.isEN ? viewConfig.enClass : '']\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [".value{display:inline-flex;align-items:center}.value mat-icon{font-size:100%;padding:0 .5rem}.subvalue{font-size:85%;font-weight:400;opacity:.5}.card-title{font-weight:500}.card-sub-title{font-size:85%}\n"] }]
+            args: [{ selector: 'view-value', imports: [NgClass, NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div [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=\"subvalue\" [dir]=\"subValue.isEN ? 'ltr' : 'rtl'\" [ngClass]=\"[subValue.isEN ? viewConfig.enClass : '']\">\n        {{ subValue.value }}\n    </div>\n    }\n</div>\n}\n", styles: [".value{display:inline-flex;align-items:center}.value mat-icon{font-size:100%;padding:0 .5rem}.subvalue{font-size:85%;font-weight:400;opacity:.5}.card-title{font-weight:500}.card-sub-title{font-size:85%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { textAlign: [{
                 type: HostBinding,
                 args: ['style.text-align']
@@ -861,11 +867,11 @@ class ViewCardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "style.--toolbarHeight": "this.toolbarHeight" } }, 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=\"data\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <section [style.border-color]=\"viewConfig.borderColor\">\n        <header\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.background-color]=\"viewConfig.headerBackgroundColor\"\n            [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n            [style.top]=\"headerTop\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-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]=\"viewConfig.headerTextColor\">\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        </header>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <content\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.color]=\"colors[dataIndex]\"\n            [style.backgroundColor]=\"viewConfig.cardBackgroundColor\"\n        >\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 }}:</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\n                class=\"description\"\n                [style.border-color]=\"viewConfig.borderColor\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></div>\n            }\n        </content>\n        }\n    </section>\n    }\n</div>\n", styles: [".data{display:flex;flex-direction:column;row-gap:1rem}.data section{border-bottom:1px solid transparent}.data section header{display:flex;align-items:flex-start;column-gap:.75rem;z-index:1;padding-right:.75rem;border:1px solid transparent;border-bottom-width:0}.data section header mat-icon{padding:.75rem 0}.data section header .title{flex:1;padding:.75rem 0}.data section content{display:block;padding:1rem 0 .5rem;border:1px solid transparent;border-top-width:0;border-bottom-width:0}.data section content .item{display:flex;align-items:flex-start;column-gap:1rem;padding:0 1rem .5rem}.data section content .item .title{width:25%;font-size:85%;font-weight:500}.data section content .item .value{flex:1}.data section content .description{text-align:justify;font-size:85%;line-height:1.5;margin-top:.5rem;padding:.75rem 1rem 0;border-top:1px solid transparent}::ng-deep .ngx-helper-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-helper-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"], 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "style.--toolbarHeight": "this.toolbarHeight" } }, 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=\"data\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <section [style.border-color]=\"viewConfig.borderColor\">\n        <header\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.background-color]=\"viewConfig.headerBackgroundColor\"\n            [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n            [style.top]=\"headerTop\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-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] || viewConfig.headerTextColor\">\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        </header>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <content\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.color]=\"colors[dataIndex]\"\n            [style.backgroundColor]=\"viewConfig.cardBackgroundColor\"\n        >\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 }}:</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\n                class=\"description\"\n                [style.border-color]=\"viewConfig.borderColor\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></div>\n            }\n        </content>\n        }\n    </section>\n    }\n</div>\n", styles: [".data{display:flex;flex-direction:column;row-gap:1rem}.data section{border-bottom:1px solid transparent}.data section header{display:flex;align-items:flex-start;column-gap:.75rem;z-index:1;padding-right:.75rem;border:1px solid transparent;border-bottom-width:0}.data section header mat-icon{padding:.75rem 0}.data section header .title{flex:1;padding:.75rem 0}.data section content{display:block;padding:1rem 0 .5rem;border:1px solid transparent;border-top-width:0;border-bottom-width:0}.data section content .item{display:flex;align-items:flex-start;column-gap:1rem;padding:0 1rem .5rem}.data section content .item .title{width:25%;font-size:85%;font-weight:500}.data section content .item .value{flex:1}.data section content .description{text-align:justify;font-size:85%;line-height:1.5;margin-top:.5rem;padding:.75rem 1rem 0;border-top:1px solid transparent}::ng-deep .ngx-helper-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-helper-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"], 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.0.3", 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=\"data\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <section [style.border-color]=\"viewConfig.borderColor\">\n        <header\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.background-color]=\"viewConfig.headerBackgroundColor\"\n            [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n            [style.top]=\"headerTop\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-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]=\"viewConfig.headerTextColor\">\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        </header>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <content\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.color]=\"colors[dataIndex]\"\n            [style.backgroundColor]=\"viewConfig.cardBackgroundColor\"\n        >\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 }}:</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\n                class=\"description\"\n                [style.border-color]=\"viewConfig.borderColor\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></div>\n            }\n        </content>\n        }\n    </section>\n    }\n</div>\n", styles: [".data{display:flex;flex-direction:column;row-gap:1rem}.data section{border-bottom:1px solid transparent}.data section header{display:flex;align-items:flex-start;column-gap:.75rem;z-index:1;padding-right:.75rem;border:1px solid transparent;border-bottom-width:0}.data section header mat-icon{padding:.75rem 0}.data section header .title{flex:1;padding:.75rem 0}.data section content{display:block;padding:1rem 0 .5rem;border:1px solid transparent;border-top-width:0;border-bottom-width:0}.data section content .item{display:flex;align-items:flex-start;column-gap:1rem;padding:0 1rem .5rem}.data section content .item .title{width:25%;font-size:85%;font-weight:500}.data section content .item .value{flex:1}.data section content .description{text-align:justify;font-size:85%;line-height:1.5;margin-top:.5rem;padding:.75rem 1rem 0;border-top:1px solid transparent}::ng-deep .ngx-helper-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-helper-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\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=\"data\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <section [style.border-color]=\"viewConfig.borderColor\">\n        <header\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.background-color]=\"viewConfig.headerBackgroundColor\"\n            [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n            [style.top]=\"headerTop\"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <mat-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] || viewConfig.headerTextColor\">\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        </header>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <content\n            [style.border-color]=\"viewConfig.borderColor\"\n            [style.color]=\"colors[dataIndex]\"\n            [style.backgroundColor]=\"viewConfig.cardBackgroundColor\"\n        >\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 }}:</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\n                class=\"description\"\n                [style.border-color]=\"viewConfig.borderColor\"\n                [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"\n            ></div>\n            }\n        </content>\n        }\n    </section>\n    }\n</div>\n", styles: [".data{display:flex;flex-direction:column;row-gap:1rem}.data section{border-bottom:1px solid transparent}.data section header{display:flex;align-items:flex-start;column-gap:.75rem;z-index:1;padding-right:.75rem;border:1px solid transparent;border-bottom-width:0}.data section header mat-icon{padding:.75rem 0}.data section header .title{flex:1;padding:.75rem 0}.data section content{display:block;padding:1rem 0 .5rem;border:1px solid transparent;border-top-width:0;border-bottom-width:0}.data section content .item{display:flex;align-items:flex-start;column-gap:1rem;padding:0 1rem .5rem}.data section content .item .title{width:25%;font-size:85%;font-weight:500}.data section content .item .value{flex:1}.data section content .description{text-align:justify;font-size:85%;line-height:1.5;margin-top:.5rem;padding:.75rem 1rem 0;border-top:1px solid transparent}::ng-deep .ngx-helper-order-menu mat-icon{font-size:100%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-order-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{font-size:90%!important}::ng-deep .ngx-helper-order-menu .mat-divider{margin:0!important;border-top-color:var(--outline-variant)}\n"] }]
         }], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { toolbarHeight: [{
                 type: HostBinding,
                 args: ['style.--toolbarHeight']
@@ -1029,7 +1035,7 @@ class ViewTableComponent {
         this.filterChanged.next({ id, value: undefined });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewTableComponent, deps: [{ token: ViewService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewTableComponent, isStandalone: true, selector: "view-table", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.color]=\"viewConfig.headerTextColor\"\n        [style.background-color]=\"viewConfig.headerBackgroundColor\"\n        [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.headerTop?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\" [style.border-color]=\"viewConfig.borderColor\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th\n                class=\"active-filters\"\n                [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\"\n                [style.border-color]=\"viewConfig.borderColor\"\n            >\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div\n                            class=\"value\"\n                            (click)=\"updateFilter(item.id)\"\n                            [ngClass]=\"item.english ? viewConfig.enClass : ''\"\n                        >\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\n                        class=\"clear\"\n                        [style.border-color]=\"viewConfig.highlightText\"\n                        [style.color]=\"viewConfig.highlightText\"\n                        [style.background-color]=\"viewConfig.highlightBackground\"\n                        (click)=\"filterCleared.next()\"\n                    >\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <mat-icon>filter_alt_off</mat-icon>\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 class=\"column\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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 [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\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: ["table thead{z-index:1}table thead th{padding:1.25rem 1rem}table thead th .column{display:flex;align-items:center;column-gap:.5rem}table thead th .column mat-icon{font-size:100%}table thead th.active-filters{padding:0;text-align:right;border-bottom:1px solid transparent}table thead th.active-filters .toolbar{display:flex;align-items:center;flex-wrap:wrap;row-gap:.5rem;column-gap:.5rem;overflow:hidden;padding:.75rem}table thead th.active-filters .toolbar .item{display:flex;align-items:center;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap}table thead th.active-filters .toolbar .item .title{cursor:pointer;padding:0 .75rem 0 .5rem}table thead th.active-filters .toolbar .item .value{cursor:pointer;padding-left:.5rem;font-weight:400;max-width:150px;overflow:hidden;text-overflow:ellipsis}table thead th.active-filters .toolbar .item .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:.25rem .5rem}table thead th.active-filters .toolbar .item .icon mat-icon{font-size:100%}table thead th.active-filters .toolbar .clear{display:flex;align-items:center;column-gap:.5rem;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap;padding:.25rem .5rem;cursor:pointer}table thead th.active-filters .toolbar .clear mat-icon{font-size:100%}table tbody td{padding:.75rem 1rem;vertical-align:top;border-top:1px solid transparent}table tbody td.icon{padding-left:0}table tbody td.action{padding:.25rem 0 0}table tbody td.description{padding-top:0;font-size:85%;line-height:1.5;text-align:justify}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewTableComponent, isStandalone: true, selector: "view-table", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.color]=\"viewConfig.headerTextColor\"\n        [style.background-color]=\"viewConfig.headerBackgroundColor\"\n        [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.headerTop?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\" [style.border-color]=\"viewConfig.borderColor\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th\n                class=\"active-filters\"\n                [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\"\n                [style.border-color]=\"viewConfig.borderColor\"\n            >\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div\n                            class=\"value\"\n                            (click)=\"updateFilter(item.id)\"\n                            [ngClass]=\"item.english ? viewConfig.enClass : ''\"\n                        >\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\n                        class=\"clear\"\n                        [style.border-color]=\"viewConfig.highlightText\"\n                        [style.color]=\"viewConfig.highlightText\"\n                        [style.background-color]=\"viewConfig.highlightBackground\"\n                        (click)=\"filterCleared.next()\"\n                    >\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <mat-icon>filter_alt_off</mat-icon>\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 class=\"column\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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 [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\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: ["table thead{z-index:1}table thead th{padding:1.25rem 1rem}table thead th .column{display:flex;align-items:center;column-gap:.5rem}table thead th .column mat-icon{font-size:100%}table thead th.active-filters{padding:0;text-align:right;border-bottom:1px solid transparent}table thead th.active-filters .toolbar{display:flex;align-items:center;flex-wrap:wrap;row-gap:.5rem;column-gap:.5rem;overflow:hidden;padding:.75rem}table thead th.active-filters .toolbar .item{display:flex;align-items:center;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap}table thead th.active-filters .toolbar .item .title{cursor:pointer;padding:0 .75rem 0 .5rem}table thead th.active-filters .toolbar .item .value{cursor:pointer;padding-left:.5rem;font-weight:400;max-width:150px;overflow:hidden;text-overflow:ellipsis}table thead th.active-filters .toolbar .item .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:.25rem .5rem}table thead th.active-filters .toolbar .item .icon mat-icon{font-size:100%}table thead th.active-filters .toolbar .clear{display:flex;align-items:center;column-gap:.5rem;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap;padding:.25rem .5rem;cursor:pointer}table thead th.active-filters .toolbar .clear mat-icon{font-size:100%}table tbody td{padding:.75rem 1rem;vertical-align:top;border-top:1px solid transparent}table tbody td.icon{padding-left:0}table tbody td.action{padding:.25rem 0 0}table tbody td.description{padding-top:0;font-size:85%;line-height:1.5;text-align:justify}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: '*' }))]),
             ]),
@@ -1041,7 +1047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         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.color]=\"viewConfig.headerTextColor\"\n        [style.background-color]=\"viewConfig.headerBackgroundColor\"\n        [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.headerTop?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\" [style.border-color]=\"viewConfig.borderColor\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th\n                class=\"active-filters\"\n                [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\"\n                [style.border-color]=\"viewConfig.borderColor\"\n            >\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div\n                            class=\"value\"\n                            (click)=\"updateFilter(item.id)\"\n                            [ngClass]=\"item.english ? viewConfig.enClass : ''\"\n                        >\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\n                        class=\"clear\"\n                        [style.border-color]=\"viewConfig.highlightText\"\n                        [style.color]=\"viewConfig.highlightText\"\n                        [style.background-color]=\"viewConfig.highlightBackground\"\n                        (click)=\"filterCleared.next()\"\n                    >\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <mat-icon>filter_alt_off</mat-icon>\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 class=\"column\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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 [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\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: ["table thead{z-index:1}table thead th{padding:1.25rem 1rem}table thead th .column{display:flex;align-items:center;column-gap:.5rem}table thead th .column mat-icon{font-size:100%}table thead th.active-filters{padding:0;text-align:right;border-bottom:1px solid transparent}table thead th.active-filters .toolbar{display:flex;align-items:center;flex-wrap:wrap;row-gap:.5rem;column-gap:.5rem;overflow:hidden;padding:.75rem}table thead th.active-filters .toolbar .item{display:flex;align-items:center;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap}table thead th.active-filters .toolbar .item .title{cursor:pointer;padding:0 .75rem 0 .5rem}table thead th.active-filters .toolbar .item .value{cursor:pointer;padding-left:.5rem;font-weight:400;max-width:150px;overflow:hidden;text-overflow:ellipsis}table thead th.active-filters .toolbar .item .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:.25rem .5rem}table thead th.active-filters .toolbar .item .icon mat-icon{font-size:100%}table thead th.active-filters .toolbar .clear{display:flex;align-items:center;column-gap:.5rem;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap;padding:.25rem .5rem;cursor:pointer}table thead th.active-filters .toolbar .clear mat-icon{font-size:100%}table tbody td{padding:.75rem 1rem;vertical-align:top;border-top:1px solid transparent}table tbody td.icon{padding-left:0}table tbody td.action{padding:.25rem 0 0}table tbody td.description{padding-top:0;font-size:85%;line-height:1.5;text-align:justify}\n"] }]
+                    ], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.color]=\"viewConfig.headerTextColor\"\n        [style.background-color]=\"viewConfig.headerBackgroundColor\"\n        [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n        [style.top]=\"viewConfig.stickyView?.headerTop?.desktopView || undefined\"\n    >\n        <!-- ACTIVE FILTERS -->\n        @if (activeFilters.length > 0) {\n        <tr>\n            <!-- ICON -->\n            @if (hasIcon) {\n            <th class=\"active-filters\" [style.border-color]=\"viewConfig.borderColor\"></th>\n            }\n\n            <!-- TOOLBAR -->\n            <th\n                class=\"active-filters\"\n                [colSpan]=\"ngxTable.columns.length + (this.hasAction ? 1 : 0)\"\n                [style.border-color]=\"viewConfig.borderColor\"\n            >\n                <div class=\"toolbar\" [@toolbar]>\n                    @for (item of activeFilters; track $index) {\n                    <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\">\n                        <div class=\"title\" (click)=\"updateFilter(item.id)\">{{ item.title }}:</div>\n                        <div\n                            class=\"value\"\n                            (click)=\"updateFilter(item.id)\"\n                            [ngClass]=\"item.english ? viewConfig.enClass : ''\"\n                        >\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\n                        class=\"clear\"\n                        [style.border-color]=\"viewConfig.highlightText\"\n                        [style.color]=\"viewConfig.highlightText\"\n                        [style.background-color]=\"viewConfig.highlightBackground\"\n                        (click)=\"filterCleared.next()\"\n                    >\n                        <div class=\"title\">\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</div>\n                        <mat-icon>filter_alt_off</mat-icon>\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 class=\"column\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\n        >\n            <!-- ICON -->\n            @if (hasIcon) {\n            <td class=\"icon\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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 [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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\" [style.border-color]=\"viewConfig.alternateRows ? '' : viewConfig.borderColor\">\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            [style.background-color]=\"\n                viewConfig.alternateRows\n                    ? dataIndex % 2 === 1\n                        ? viewConfig.oddRowsBackgroundColor\n                        : viewConfig.evenRowsBackgroundColor\n                    : ''\n            \"\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: ["table thead{z-index:1}table thead th{padding:1.25rem 1rem}table thead th .column{display:flex;align-items:center;column-gap:.5rem}table thead th .column mat-icon{font-size:100%}table thead th.active-filters{padding:0;text-align:right;border-bottom:1px solid transparent}table thead th.active-filters .toolbar{display:flex;align-items:center;flex-wrap:wrap;row-gap:.5rem;column-gap:.5rem;overflow:hidden;padding:.75rem}table thead th.active-filters .toolbar .item{display:flex;align-items:center;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap}table thead th.active-filters .toolbar .item .title{cursor:pointer;padding:0 .75rem 0 .5rem}table thead th.active-filters .toolbar .item .value{cursor:pointer;padding-left:.5rem;font-weight:400;max-width:150px;overflow:hidden;text-overflow:ellipsis}table thead th.active-filters .toolbar .item .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:.25rem .5rem}table thead th.active-filters .toolbar .item .icon mat-icon{font-size:100%}table thead th.active-filters .toolbar .clear{display:flex;align-items:center;column-gap:.5rem;font-size:85%;border-radius:16px;border:1px solid transparent;white-space:nowrap;padding:.25rem .5rem;cursor:pointer}table thead th.active-filters .toolbar .clear mat-icon{font-size:100%}table tbody td{padding:.75rem 1rem;vertical-align:top;border-top:1px solid transparent}table tbody td.icon{padding-left:0}table tbody td.action{padding:.25rem 0 0}table tbody td.description{padding-top:0;font-size:85%;line-height:1.5;text-align:justify}\n"] }]
         }], ctorParameters: () => [{ type: ViewService }, { type: FilterService }], propDecorators: { ngxTable: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1141,9 +1147,9 @@ class NgxTableComponent {
             backgroundColor: this.config?.colors?.background || 'var(--background)',
             headerTextColor: this.config?.colors?.headerText || '',
             headerBackgroundColor: this.config?.colors?.headerBackground || 'var(--surface-container-highest)',
-            oddRowsBackgroundColor: this.config?.colors?.oddRowsBackground || 'var(--background)',
-            evenRowsBackgroundColor: this.config?.colors?.evenRowsBackground || 'var(--surface-container)',
-            cardBackgroundColor: this.config?.colors?.cardBackground || 'var(--surface-container-high)',
+            oddRowsBackgroundColor: this.config?.colors?.oddRowsBackground || 'var(--surface-container)',
+            evenRowsBackgroundColor: this.config?.colors?.evenRowsBackground || 'var(--background)',
+            cardBackgroundColor: this.config?.colors?.cardBackground || 'var(--surface-container-low)',
             paginationBackgroundColor: this.config?.colors?.paginationBackground || 'var(--background)',
             highlightText: this.config?.colors?.highlightText || 'var(--secondary)',
             highlightBackground: this.config?.colors?.highlightBackground || 'var(--secondary-container)',