@webilix/ngx-table-m3 0.0.1

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

@@ -0,0 +1,1258 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Component, ViewChild, Injector, Injectable, Input, HostBinding, EventEmitter, Output, makeEnvironmentProviders, Optional, Inject } from '@angular/core';
+import { NgClass, NgComponentOutlet, DecimalPipe } from '@angular/common';
+import { Helper } from '@webilix/helper-library';
+import { MatIcon } from '@angular/material/icon';
+import * as i2 from '@webilix/ngx-helper-m3';
+import { NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_CLOSE, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperMobilePipe, NgxHelperNumberPipe, NgxHelperMultiLinePipe } from '@webilix/ngx-helper-m3';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { NgxCalendarDateComponent } from '@webilix/ngx-calendar-m3';
+import { JalaliDateTime } from '@webilix/jalali-date-time';
+import { MatCheckbox } from '@angular/material/checkbox';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+import * as i1$1 from '@angular/router';
+import { MatDivider } from '@angular/material/divider';
+import * as i1$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2$1 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+class FilterMethods {
+}
+const FILTER_DATA = new InjectionToken('NGX-TABLE-FILTER-DATA');
+const FILTER_VALUE = new InjectionToken('NGX-TABLE-FILTER-VALUE');
+const FILTER_CHANGE = new InjectionToken('NGX-TABLE-FILTER-CHANGE');
+
+class FilterDateComponent {
+    data = inject(FILTER_DATA);
+    value = inject(FILTER_VALUE);
+    onChange = inject(FILTER_CHANGE);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FilterDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "filter-date" } }, ngImport: i0, template: "<ngx-calendar-date\n    [value]=\"this.value\"\n    [minDate]=\"this.data.filter.minDate\"\n    [maxDate]=\"this.data.filter.maxDate\"\n    (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n", styles: [""], dependencies: [{ kind: "component", type: NgxCalendarDateComponent, selector: "ngx-calendar-date", inputs: ["value", "minDate", "maxDate"], outputs: ["onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDateComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'filter-date' }, imports: [NgxCalendarDateComponent], template: "<ngx-calendar-date\n    [value]=\"this.value\"\n    [minDate]=\"this.data.filter.minDate\"\n    [maxDate]=\"this.data.filter.maxDate\"\n    (onChange)=\"onChange($event.date)\"\n></ngx-calendar-date>\n" }]
+        }] });
+
+class FilterDateMethods extends FilterMethods {
+    toParam(value) {
+        return value.toJSON();
+    }
+    value(value, filter) {
+        if (!value || !Helper.IS.STRING.date(value))
+            return undefined;
+        const jalali = JalaliDateTime();
+        const gregorian = jalali.gregorian(value).date;
+        const date = jalali.periodDay(1, new Date(`${gregorian}T00:00:00.000Z`)).from;
+        if (filter.minDate && date.getTime() < filter.minDate.getTime())
+            return undefined;
+        if (filter.maxDate && date.getTime() > filter.maxDate.getTime())
+            return undefined;
+        return date;
+    }
+    query(value) {
+        const jalali = JalaliDateTime();
+        return jalali.toString(value, { format: 'Y-M-D' });
+    }
+    active(value, filter) {
+        const jalali = JalaliDateTime();
+        return { value: jalali.toFullText(value, { format: 'Y/M/D' }), english: false };
+    }
+}
+
+class FilterMultiSelectComponent {
+    data = inject(FILTER_DATA);
+    value = inject(FILTER_VALUE);
+    onChange = inject(FILTER_CHANGE);
+    updateValue(id, checked) {
+        this.value = this.value || [];
+        if (!checked)
+            this.value = this.value.filter((v) => v !== id);
+        else if (!this.value.includes(id))
+            this.value.push(id);
+        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"] }] });
+}
+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"] }]
+        }] });
+
+class FilterMultiSelectMethods extends FilterMethods {
+    toParam(value) {
+        return value.join('||');
+    }
+    value(value, filter) {
+        if (!value || !Helper.IS.string(value))
+            return undefined;
+        const ids = filter.options.map((options) => options.id);
+        const values = value
+            .split('||')
+            .filter((item) => ids.includes(item))
+            .filter((item, index, arr) => arr.indexOf(item) === index);
+        return values.length === 0 ? undefined : values;
+    }
+    query(value) {
+        return this.toParam(value);
+    }
+    active(value, filter) {
+        const titles = value
+            .map((value) => filter.options.find((o) => o.id === value)?.title || '')
+            .filter((title) => title !== '');
+        const selected = titles.length > 2 ? `${value.length} گزینه` : titles.join(filter.english ? ', ' : '، ');
+        return { value: selected, english: !!filter.english };
+    }
+}
+
+class FilterSearchComponent {
+    searchInput;
+    data = inject(FILTER_DATA);
+    value = inject(FILTER_VALUE);
+    onChange = inject(FILTER_CHANGE);
+    query = this.value?.query;
+    mode = this.data.filter.mode || this.value?.mode || 'PHRASE';
+    ngAfterViewInit() {
+        if (!this.searchInput)
+            return;
+        const element = this.searchInput.nativeElement;
+        element?.focus();
+    }
+    updateQuery(query) {
+        query = query && Helper.IS.string(query) ? query.trim() : '';
+        this.query = query.length === 0 ? undefined : query;
+        this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
+    }
+    updateMode(mode) {
+        this.mode = mode;
+        this.onChange(this.query ? { query: this.query, mode: this.mode || 'PHRASE' } : undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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"] }] });
+}
+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"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
+class FilterSearchMethods extends FilterMethods {
+    toParam(value) {
+        return `${value.query}:${value.mode}`;
+    }
+    value(value, filter) {
+        if (!value || !Helper.IS.string(value))
+            return undefined;
+        const index = value.lastIndexOf(':');
+        if (index === -1)
+            return undefined;
+        const query = value.substring(0, index);
+        if (!query || !Helper.IS.string(query))
+            return undefined;
+        const mode = value.substring(index + 1);
+        if (!['PHRASE', 'EACH', 'ALL'].includes(mode))
+            return undefined;
+        if (filter.mode && filter.mode !== mode)
+            return undefined;
+        return { query, mode };
+    }
+    query(value) {
+        return this.toParam(value);
+    }
+    active(value, filter) {
+        return { value: value.query, english: !!filter.english };
+    }
+}
+
+class FilterSelectComponent {
+    data = inject(FILTER_DATA);
+    value = inject(FILTER_VALUE);
+    onChange = inject(FILTER_CHANGE);
+    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"] }] });
+}
+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"] }]
+        }] });
+
+class FilterSelectMethods extends FilterMethods {
+    toParam(value) {
+        return value;
+    }
+    value(value, filter) {
+        if (!value || !Helper.IS.string(value))
+            return undefined;
+        const ids = filter.options.map((options) => options.id);
+        return ids.includes(value) ? value : undefined;
+    }
+    query(value) {
+        return this.toParam(value);
+    }
+    active(value, filter) {
+        return { value: filter.options.find((o) => o.id === value)?.title || '', english: !!filter.english };
+    }
+}
+
+const FilterInfo = {
+    DATE: { methods: new FilterDateMethods(), component: FilterDateComponent },
+    'MULTI-SELECT': { methods: new FilterMultiSelectMethods(), component: FilterMultiSelectComponent },
+    SEARCH: { methods: new FilterSearchMethods(), component: FilterSearchComponent },
+    SELECT: { methods: new FilterSelectMethods(), component: FilterSelectComponent },
+};
+
+class FilterComponent {
+    data = inject(NGX_HELPER_CONTAINER_DATA);
+    closeContainer = inject(NGX_HELPER_CONTAINER_CLOSE);
+    filterInfo = FilterInfo;
+    value = undefined;
+    injector;
+    ngOnInit() {
+        this.value = this.data.filter.value;
+        this.injector = Injector.create({
+            providers: [
+                { provide: FILTER_DATA, useValue: { filter: this.data.filter.filter, viewConfig: this.data.viewConfig } },
+                { provide: FILTER_VALUE, useValue: this.value },
+                { provide: FILTER_CHANGE, useFactory: () => (value) => (this.value = value) },
+            ],
+        });
+    }
+    onKeydown(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Enter' && this.value)
+            this.closeContainer({ value: this.value });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "filter", host: { listeners: { "window:keydown": "onKeydown($event)" } }, ngImport: i0, template: "<content>\n    <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</content>\n\n<footer>\n    <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n        \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n    </button>\n    <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n        \u062A\u0627\u06CC\u06CC\u062F\n    </button>\n</footer>\n", styles: [":host{display:flex;flex-direction:column}:host content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}:host footer{display:flex;justify-content:flex-end;padding:1rem;column-gap:.5rem;border-top:1px solid var(--surface-container-highest)}:host footer button.confirm{flex:1}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter', host: { '(window:keydown)': 'onKeydown($event)' }, imports: [MatButton, NgComponentOutlet], template: "<content>\n    <ng-container *ngComponentOutlet=\"filterInfo[data.filter.filter.type].component; injector: injector\"></ng-container>\n</content>\n\n<footer>\n    <button mat-stroked-button type=\"button\" [disabled]=\"!value\" (click)=\"closeContainer({ value: undefined })\">\n        \u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\n    </button>\n    <button mat-flat-button type=\"button\" class=\"confirm\" [disabled]=\"!value\" (click)=\"closeContainer({value})\">\n        \u062A\u0627\u06CC\u06CC\u062F\n    </button>\n</footer>\n", styles: [":host{display:flex;flex-direction:column}:host content{display:block;overflow-x:hidden;overflow-y:auto;max-height:60vh}:host footer{display:flex;justify-content:flex-end;padding:1rem;column-gap:.5rem;border-top:1px solid var(--surface-container-highest)}:host footer button.confirm{flex:1}\n"] }]
+        }] });
+
+class FilterService {
+    activatedRoute;
+    ngxHelperContainerService;
+    constructor(activatedRoute, ngxHelperContainerService) {
+        this.activatedRoute = activatedRoute;
+        this.ngxHelperContainerService = ngxHelperContainerService;
+    }
+    getFilters(ngxTable) {
+        const filters = {};
+        // CHECK COLUMNS
+        ngxTable.columns.forEach((column) => {
+            if (!column.tools || !('filter' in column.tools) || !column.tools.filter)
+                return;
+            const title = column.title || '';
+            const key = column.tools.id;
+            filters[key] = { title, filter: column.tools.filter };
+        });
+        if (Object.keys(filters).length === 0)
+            return {};
+        // CHECK QUERY PARAMS
+        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+        Object.keys(filters).forEach((id) => {
+            const param = queryParams[`ngx-table-filter-${id}`];
+            if (!param || !Helper.IS.string(param))
+                return;
+            const column = ngxTable.columns.find((column) => column.tools?.id === id);
+            if (!column || !column.tools || !('filter' in column.tools) || !column.tools.filter)
+                return;
+            const value = FilterInfo[column.tools.filter.type].methods.value(param, column.tools.filter);
+            filters[id] = { ...filters[id], value };
+        });
+        return filters;
+    }
+    updateFilter(filter, viewConfig) {
+        return new Promise((resolve) => {
+            this.ngxHelperContainerService
+                .init(FilterComponent, filter.title, { data: { filter, viewConfig }, padding: '0' })
+                .bottomSheet((response) => resolve({ ...filter, value: response.value }), () => resolve(undefined));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.NgxHelperContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2.NgxHelperContainerService }] });
+
+class ViewActionComponent {
+    router;
+    actions;
+    item;
+    viewConfig;
+    isMobile;
+    inRow = [];
+    inMenu = [];
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnChanges(changes) {
+        this.inRow = [];
+        this.inMenu = [];
+        this.actions.forEach((action) => {
+            if (action === 'DIVIDER') {
+                if (this.inMenu.length === 0)
+                    return;
+                if (this.inMenu[this.inMenu.length - 1] === 'DIVIDER')
+                    return;
+                this.inMenu.push('DIVIDER');
+                return;
+            }
+            if (action.hideOn && action.hideOn(this.item))
+                return;
+            let item = undefined;
+            const isDisabled = !!action.disableOn && action.disableOn(this.item);
+            const color = action.standalone ? this.viewConfig.actionButtonColor : this.viewConfig.actionMenuColor;
+            switch (action.type) {
+                case 'ACTION':
+                    item = {
+                        title: action.title,
+                        icon: action.icon,
+                        action: action.action,
+                        color: action.color || color,
+                        isDisabled,
+                    };
+                    break;
+                case 'UPDATE':
+                    item = { title: 'ویرایش', icon: 'edit', color, action: action.action, isDisabled };
+                    break;
+                case 'DELETE':
+                    item = {
+                        title: 'حذف',
+                        icon: 'delete',
+                        color: this.viewConfig.actionWarnColor,
+                        action: action.action,
+                        isDisabled,
+                    };
+                    break;
+                case 'STATUS':
+                    const isDeactive = action.isDeactive(this.item);
+                    item = {
+                        title: isDeactive ? 'فعال کردن' : 'غیرفعال کردن',
+                        icon: isDeactive ? 'check_box' : 'disabled_by_default',
+                        color: isDeactive ? color : this.viewConfig.actionWarnColor,
+                        action: (data) => action.action(data, isDeactive),
+                        isDisabled,
+                    };
+                    break;
+                case 'LOG':
+                    item = {
+                        title: 'گزارش تغییرات',
+                        icon: 'published_with_changes',
+                        color,
+                        action: action.action,
+                        isDisabled,
+                    };
+                    break;
+            }
+            if (!item)
+                return;
+            action.standalone ? this.inRow.push(item) : this.inMenu.push(item);
+        });
+        while (this.inMenu[this.inMenu.length - 1] === 'DIVIDER')
+            this.inMenu.splice(this.inMenu.length - 1, 1);
+    }
+    onClick(action) {
+        const result = action(this.item);
+        if (result)
+            this.router.navigate(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewActionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewActionComponent, isStandalone: true, selector: "view-action", inputs: { actions: "actions", item: "item", viewConfig: "viewConfig", isMobile: "isMobile" }, usesOnChanges: true, ngImport: i0, template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    [style.color]=\"item.isDisabled ? '' : item.color\"\n    [style.font-size]=\"viewConfig.actionButtonSize\"\n    [disabled]=\"item.isDisabled\"\n    (click)=\"onClick(item.action)\"\n    class=\"desktop\"\n>\n    {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n    <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    [matMenuTriggerFor]=\"actionMenu\"\n    [style.color]=\"viewConfig.actionButtonColor\"\n    [style.font-size]=\"viewConfig.actionButtonSize\"\n    class=\"desktop\"\n>\n    {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n    <mat-icon [style.color]=\"viewConfig.actionButtonColor\">more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'after'\" class=\"ngx-helper-action-menu\">\n    @for (item of inMenu; track $index) {\n    <!-- DIVIDER -->\n    @if (item === 'DIVIDER') {\n    <mat-divider></mat-divider>\n    }\n\n    <!-- MENU ITEM -->\n    @else {\n    <button\n        mat-menu-item\n        type=\"button\"\n        [style.color]=\"item.isDisabled ? '' : item.color\"\n        (click)=\"onClick(item.action)\"\n        [disabled]=\"item.isDisabled\"\n    >\n        <span>{{ item.title }}</span>\n        <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n    </button>\n    } }\n</mat-menu>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host button.desktop{border-radius:0;z-index:0}::ng-deep .ngx-helper-action-menu mat-icon{margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-action', imports: [MatButton, MatDivider, MatIconButton, MatIcon, MatMenuModule], template: "<!-- ROW -->\n@for (item of inRow; track $index) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    [style.color]=\"item.isDisabled ? '' : item.color\"\n    [style.font-size]=\"viewConfig.actionButtonSize\"\n    [disabled]=\"item.isDisabled\"\n    (click)=\"onClick(item.action)\"\n    class=\"desktop\"\n>\n    {{ item.title }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [disabled]=\"item.isDisabled\" (click)=\"onClick(item.action)\">\n    <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n</button>\n} }\n\n<!-- MENU -->\n@if (this.inMenu.length > 0) {\n<!-- DESKTOP -->\n@if (!isMobile) {\n<button\n    mat-button\n    type=\"button\"\n    [matMenuTriggerFor]=\"actionMenu\"\n    [style.color]=\"viewConfig.actionButtonColor\"\n    [style.font-size]=\"viewConfig.actionButtonSize\"\n    class=\"desktop\"\n>\n    {{ viewConfig.actionMenuTitle }}\n</button>\n}\n<!-- MOBILE -->\n@else {\n<button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"actionMenu\">\n    <mat-icon [style.color]=\"viewConfig.actionButtonColor\">more_vert</mat-icon>\n</button>\n}\n\n<mat-menu #actionMenu=\"matMenu\" [xPosition]=\"'after'\" class=\"ngx-helper-action-menu\">\n    @for (item of inMenu; track $index) {\n    <!-- DIVIDER -->\n    @if (item === 'DIVIDER') {\n    <mat-divider></mat-divider>\n    }\n\n    <!-- MENU ITEM -->\n    @else {\n    <button\n        mat-menu-item\n        type=\"button\"\n        [style.color]=\"item.isDisabled ? '' : item.color\"\n        (click)=\"onClick(item.action)\"\n        [disabled]=\"item.isDisabled\"\n    >\n        <span>{{ item.title }}</span>\n        <mat-icon [style.color]=\"item.isDisabled ? '' : item.color\">{{ item.icon }}</mat-icon>\n    </button>\n    } }\n</mat-menu>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host button.desktop{border-radius:0;z-index:0}::ng-deep .ngx-helper-action-menu mat-icon{margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { actions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isMobile: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ColumnMethods {
+}
+const COLUMN_TYPE = new InjectionToken('NGX-TABLE-COLUMN-TYPE');
+const COLUMN_CONFIG = new InjectionToken('NGX-TABLE-COLUMN-CONFIG');
+const COLUMN_VALUE = new InjectionToken('NGX-TABLE-COLUMN-VALUE');
+
+class ColumnDateComponent {
+    column = inject(COLUMN_TYPE);
+    value = inject(COLUMN_VALUE);
+    config = inject(COLUMN_CONFIG);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-date" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [ngClass]=\"[config.isDeactive ? config.deactiveClass : '']\">\n    {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnDateComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'column-date' }, imports: [NgClass, NgxHelperDatePipe], template: "<div [style.display]=\"'inline-block'\" [ngClass]=\"[config.isDeactive ? config.deactiveClass : '']\">\n    {{ value | ngxHelperDate : { format: column.format } }}\n</div>\n" }]
+        }] });
+
+class ColumnDateMethods extends ColumnMethods {
+    column(column) {
+        return { ...column, title: column.title || 'تاریخ' };
+    }
+    value(value, column) {
+        return Helper.IS.date(value) ? value : undefined;
+    }
+}
+
+class ColumnDurationComponent {
+    column = inject(COLUMN_TYPE);
+    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" }] });
+}
+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" }]
+        }] });
+
+class ColumnDurationMethods extends ColumnMethods {
+    column(column) {
+        return { ...column };
+    }
+    value(value, column) {
+        if (Helper.IS.number(value))
+            return Math.abs(value);
+        else if (Helper.IS.date(value))
+            return Math.floor(Math.abs(new Date().getTime() - value.getTime()) / 1000);
+        else if (Helper.IS.object(value)) {
+            const from = Helper.IS.date(value?.from) ? value.from : undefined;
+            const to = Helper.IS.date(value?.to) ? value.to : undefined;
+            if (!from && !to)
+                return undefined;
+            return Math.floor(Math.abs((from || new Date()).getTime() - (to || new Date()).getTime()) / 1000);
+        }
+        return undefined;
+    }
+}
+
+class ColumnMobileComponent {
+    column = inject(COLUMN_TYPE);
+    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" }] });
+}
+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" }]
+        }] });
+
+class ColumnMobileMethods extends ColumnMethods {
+    column(column) {
+        return { ...column, title: column.title || 'موبایل' };
+    }
+    value(value, column) {
+        return Helper.IS.STRING.mobile(value) ? value : undefined;
+    }
+}
+
+class ColumnNumberComponent {
+    column = inject(COLUMN_TYPE);
+    value = inject(COLUMN_VALUE);
+    config = inject(COLUMN_CONFIG);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnNumberComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-number" } }, 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 | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnNumberComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'column-number' }, imports: [NgClass, NgxHelperNumberPipe], template: "<div\n    [style.display]=\"'inline-block'\"\n    [dir]=\"'ltr'\"\n    [ngClass]=\"[config.isEN ? config.enClass : '', config.isDeactive ? config.deactiveClass : '']\"\n>\n    {{ value | ngxHelperNumber : { english: config.isEN, fractionDigits: column.fractionDigits } }}\n</div>\n" }]
+        }] });
+
+class ColumnNumberMethods extends ColumnMethods {
+    column(column) {
+        return { ...column };
+    }
+    value(value, column) {
+        return Helper.IS.number(value) ? value : undefined;
+    }
+}
+
+class ColumnTextComponent {
+    column = inject(COLUMN_TYPE);
+    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"] }] });
+}
+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" }]
+        }] });
+
+class ColumnTextMethods extends ColumnMethods {
+    column(column) {
+        return { ...column };
+    }
+    value(value, column) {
+        return Helper.IS.string(value) && value !== '' ? value : undefined;
+    }
+}
+
+const ColumnInfo = {
+    DATE: { methods: new ColumnDateMethods(), component: ColumnDateComponent },
+    DURATION: { methods: new ColumnDurationMethods(), component: ColumnDurationComponent },
+    MOBILE: { methods: new ColumnMobileMethods(), component: ColumnMobileComponent },
+    NUMBER: { methods: new ColumnNumberMethods(), component: ColumnNumberComponent },
+    TEXT: { methods: new ColumnTextMethods(), component: ColumnTextComponent },
+};
+
+class ViewValueComponent {
+    router;
+    textAlign = 'left';
+    column;
+    item;
+    viewConfig;
+    isDeactive;
+    isCard;
+    isCardTitle;
+    isCardSubTitle;
+    columnInfo = ColumnInfo;
+    injector;
+    value;
+    subValue;
+    color;
+    hasClick;
+    copyText;
+    isCopied = false;
+    copyTimeout;
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnChanges(changes) {
+        this.textAlign = this.isCard ? 'right' : (this.column.textAlign || 'RIGHT').toLocaleLowerCase();
+        this.value = this.getValue();
+        this.subValue = this.getSubValue();
+        this.color = this.column.color
+            ? typeof this.column.color === 'function'
+                ? this.column.color(this.item)
+                : this.column.color
+            : undefined;
+        this.hasClick = !!this.column.onClick;
+        this.copyText = !this.hasClick && this.column.onCopy ? this.column.onCopy(this.item) : undefined;
+        const columnConfig = {
+            isEN: 'english' in this.column && this.column.english
+                ? typeof this.column.english === 'function'
+                    ? this.column.english(this.item)
+                    : this.column.english
+                : false,
+            enClass: this.viewConfig.enClass,
+            isDeactive: !!this.isDeactive,
+            deactiveClass: this.viewConfig.deactiveClass,
+        };
+        this.injector = Injector.create({
+            providers: [
+                { provide: COLUMN_TYPE, useValue: this.column },
+                { provide: COLUMN_VALUE, useValue: this.value },
+                { provide: COLUMN_CONFIG, useValue: columnConfig },
+            ],
+        });
+    }
+    getValue() {
+        const value = typeof this.column.value === 'function' ? this.column.value(this.item) : this.item[this.column.value];
+        if (Helper.IS.empty(value))
+            return undefined;
+        return ColumnInfo[this.column.type].methods.value(value, this.column);
+    }
+    getSubValue() {
+        if (!this.column.subValue)
+            return undefined;
+        if (typeof this.column.subValue === 'function') {
+            const subValue = this.column.subValue(this.item);
+            if (subValue === undefined || Helper.IS.empty(subValue))
+                return undefined;
+            return {
+                value: typeof subValue === 'string' ? subValue : subValue.value,
+                isEN: typeof subValue === 'string' ? false : !!subValue.english,
+            };
+        }
+        else {
+            const subValue = this.item[this.column.subValue];
+            if (Helper.IS.empty(subValue))
+                return undefined;
+            return { value: subValue, isEN: false };
+        }
+    }
+    onClick() {
+        if (!this.column.onClick)
+            return;
+        const onClick = this.column.onClick(this.item);
+        if (typeof onClick === 'function')
+            onClick();
+        else
+            this.router.navigate(onClick);
+    }
+    onCopy() {
+        if (!this.copyText)
+            return;
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+        this.isCopied = true;
+        this.copyTimeout = setTimeout(() => {
+            this.isCopied = false;
+            this.copyTimeout = undefined;
+        }, 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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { textAlign: [{
+                type: HostBinding,
+                args: ['style.text-align']
+            }], column: [{
+                type: Input,
+                args: [{ required: true }]
+            }], item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isDeactive: [{
+                type: Input,
+                args: [{ required: false }]
+            }], isCard: [{
+                type: Input,
+                args: [{ required: false }]
+            }], isCardTitle: [{
+                type: Input,
+                args: [{ required: false }]
+            }], isCardSubTitle: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+class ViewService {
+    activatedRoute;
+    constructor(activatedRoute) {
+        this.activatedRoute = activatedRoute;
+    }
+    getTitleIndex(ngxTable) {
+        const index = ngxTable.columns.findIndex((l) => l.mode === 'TITLE');
+        return index === -1 ? 0 : index;
+    }
+    getSubTitleIndex(ngxTable) {
+        const index = ngxTable.columns.findIndex((l) => l.mode === 'SUBTITLE');
+        return index === -1 ? undefined : index;
+    }
+    getIcons(ngxTable, data) {
+        const iconFn = ngxTable.rows?.icon;
+        if (!iconFn)
+            return [];
+        return data.map((item) => {
+            const icon = iconFn(item);
+            return typeof icon === 'string' ? { icon } : icon;
+        });
+    }
+    getColors(ngxTable, data) {
+        const colorFn = ngxTable.rows?.color;
+        if (!colorFn)
+            return [];
+        return data.map((item) => colorFn(item));
+    }
+    getDescriptions(ngxTable, data) {
+        const descriptionFn = ngxTable.rows?.description;
+        if (!descriptionFn)
+            return [];
+        return data.map((item) => descriptionFn(item));
+    }
+    getDeactives(ngxTable, data) {
+        const deactives = [];
+        data.forEach((item, index) => {
+            if (ngxTable.rows?.isDeactive?.(item))
+                deactives.push(index);
+        });
+        return deactives;
+    }
+    getOrders(ngxTable) {
+        let defaultFound = false;
+        const orders = {};
+        // CHECK COLUMNS
+        ngxTable.columns.forEach((column) => {
+            if (!column.tools || !('order' in column.tools) || !column.tools.order)
+                return;
+            const title = column.title || '';
+            const key = column.tools.id;
+            const type = column.tools.order.type || 'ORDER';
+            const initial = type !== 'ORDER' ? type : column.tools.order.initial || 'ASC';
+            const isDefault = !defaultFound && !!column.tools.order.isDefault;
+            orders[key] = { title, type, initial, current: isDefault ? initial : undefined };
+            if (isDefault)
+                defaultFound = true;
+        });
+        if (Object.keys(orders).length === 0)
+            return {};
+        // CHECK QUERY PARAMS
+        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+        if (!!ngxTable.route && queryParams['ngx-table-order']) {
+            const param = queryParams['ngx-table-order'];
+            const index = param.lastIndexOf(':');
+            if (index !== -1) {
+                const id = param.substring(0, index);
+                const type = param.substring(index + 1);
+                if (orders[id] &&
+                    (type === 'ASC' || type === 'DESC') &&
+                    (orders[id].type === 'ORDER' || orders[id].type === type)) {
+                    Object.keys(orders).forEach((key) => {
+                        orders[key] = { ...orders[key], current: key === id ? type : undefined };
+                    });
+                }
+            }
+        }
+        return orders;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
+
+class ViewCardToolbarComponent {
+    orders;
+    filters;
+    viewConfig;
+    orderChanged = new EventEmitter();
+    updateFilter = new EventEmitter();
+    clearFilter = new EventEmitter();
+    orderKeys = [];
+    filterKeys = [];
+    showClear = false;
+    swipeStart;
+    swipeLeft = 0;
+    ngOnChanges(changes) {
+        this.orderKeys = Object.keys(this.orders);
+        const activeKeys = [];
+        const deactiveKeys = [];
+        Object.keys(this.filters).forEach((key) => {
+            if (this.filters[key].value !== undefined)
+                activeKeys.push(key);
+            else
+                deactiveKeys.push(key);
+        });
+        this.filterKeys = [...activeKeys, ...deactiveKeys];
+        this.showClear = activeKeys.length > 2;
+    }
+    updateOrder(id, type) {
+        this.orderChanged.next({ id, type });
+    }
+    swipe(event, action, toolbar, container) {
+        if (toolbar.offsetWidth > container.offsetWidth)
+            return;
+        const clientX = event instanceof MouseEvent ? event.clientX : event.changedTouches[0].clientX;
+        switch (action) {
+            case 'START':
+                this.swipeStart = clientX - this.swipeLeft;
+                break;
+            case 'END':
+                this.swipeStart = undefined;
+                break;
+            case 'MOVE':
+                if (!this.swipeStart)
+                    return;
+                let left = clientX - this.swipeStart;
+                if (left <= 0)
+                    left = 0;
+                else if (left > container.offsetWidth - toolbar.offsetWidth)
+                    left = container.offsetWidth - toolbar.offsetWidth;
+                this.swipeLeft = left;
+                container.style.left = `${left}px`;
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCardToolbarComponent, isStandalone: true, selector: "view-card-toolbar", inputs: { orders: "orders", filters: "filters", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", updateFilter: "updateFilter", clearFilter: "clearFilter" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toolbar\"\n    [style.background-color]=\"viewConfig.paginationBackgroundColor\"\n    [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n    [style.top]=\"viewConfig.stickyView?.headerTop?.mobileView || undefined\"\n    (mousedown)=\"swipe($event, 'START', toolbar, toolbarContainer)\"\n    (mousemove)=\"swipe($event, 'MOVE', toolbar, toolbarContainer)\"\n    (mouseup)=\"swipe($event, 'END', toolbar, toolbarContainer)\"\n    (touchstart)=\"swipe($event, 'START', toolbar, toolbarContainer)\"\n    (touchmove)=\"swipe($event, 'MOVE', toolbar, toolbarContainer)\"\n    (touchend)=\"swipe($event, 'END', toolbar, toolbarContainer)\"\n    #toolbar\n>\n    <div class=\"toolbar-items\" #toolbarContainer>\n        <!-- ORDER -->\n        @if (orderKeys.length > 0) {\n        <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\" [matMenuTriggerFor]=\"orderMenu\">\n            <mat-icon>swap_vert</mat-icon>\n            <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n        </div>\n        <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-order-menu\">\n            @for (item of orderKeys; track $index) {\n            <!-- DIVIDER -->\n            @if ($index !== 0) {<mat-divider></mat-divider>}\n\n            <!-- TYPES -->\n            @switch (orders[item].type) {\n            <!-- ORDR -->\n            @case ('ORDER') {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'ASC'\"\n                (click)=\"updateOrder(item, 'ASC')\"\n            >\n                <mat-icon>north</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'DESC'\"\n                (click)=\"updateOrder(item, 'DESC')\"\n            >\n                <mat-icon>south</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            }\n            <!-- ASC, DESC -->\n            @default {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current\"\n                (click)=\"updateOrder(item, orders[item].type)\"\n            >\n                <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            } } }\n        </mat-menu>\n        }\n\n        <!-- CLEAR -->\n        @if (showClear) {\n        <div\n            class=\"item\"\n            [style.color]=\"viewConfig.highlightText\"\n            [style.border-color]=\"viewConfig.highlightText\"\n            [style.background-color]=\"viewConfig.highlightBackground\"\n            (click)=\"clearFilter.next()\"\n        >\n            <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n            <mat-icon>filter_alt_off</mat-icon>\n        </div>\n\n        }\n\n        <!-- FILTER -->\n        @for (item of filterKeys; track $index) {\n        <div\n            class=\"item\"\n            [style.color]=\"filters[item].value ? viewConfig.highlightText : ''\"\n            [style.border-color]=\"filters[item].value ? viewConfig.highlightText : viewConfig.borderColor\"\n            [style.background-color]=\"filters[item].value ? viewConfig.highlightBackground : ''\"\n            (click)=\"updateFilter.next(item)\"\n        >\n            <mat-icon>filter_alt</mat-icon>\n            <span>{{ filters[item].title }}</span>\n        </div>\n        }\n    </div>\n</div>\n\n<div\n    class=\"seperator\"\n    [style.background-color]=\"viewConfig.backgroundColor\"\n    [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n    [style.top]=\"'calc(' + (viewConfig.stickyView?.headerTop?.mobileView || undefined) + ' + var(--toolbarHeight) + 2px)'\"\n></div>\n", styles: [".toolbar{z-index:2;height:calc(var(--toolbarHeight) + 2px);overflow-x:hidden}.toolbar .toolbar-items{display:inline-flex;align-items:center;column-gap:.5rem;position:relative;left:0}.toolbar .toolbar-items .item{display:flex;align-items:center;column-gap:.25rem;padding:0 .5rem;border-radius:8px;border:1px solid transparent;height:var(--toolbarHeight)}.toolbar .toolbar-items .item mat-icon{font-size:100%}.toolbar .toolbar-items .item span{font-size:80%;white-space:nowrap}.seperator{z-index:2;height:1rem}\n"], dependencies: [{ kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCardToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-card-toolbar', imports: [MatDivider, MatIcon, MatMenuModule], template: "<div\n    class=\"toolbar\"\n    [style.background-color]=\"viewConfig.paginationBackgroundColor\"\n    [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n    [style.top]=\"viewConfig.stickyView?.headerTop?.mobileView || undefined\"\n    (mousedown)=\"swipe($event, 'START', toolbar, toolbarContainer)\"\n    (mousemove)=\"swipe($event, 'MOVE', toolbar, toolbarContainer)\"\n    (mouseup)=\"swipe($event, 'END', toolbar, toolbarContainer)\"\n    (touchstart)=\"swipe($event, 'START', toolbar, toolbarContainer)\"\n    (touchmove)=\"swipe($event, 'MOVE', toolbar, toolbarContainer)\"\n    (touchend)=\"swipe($event, 'END', toolbar, toolbarContainer)\"\n    #toolbar\n>\n    <div class=\"toolbar-items\" #toolbarContainer>\n        <!-- ORDER -->\n        @if (orderKeys.length > 0) {\n        <div class=\"item\" [style.border-color]=\"viewConfig.borderColor\" [matMenuTriggerFor]=\"orderMenu\">\n            <mat-icon>swap_vert</mat-icon>\n            <span>\u062A\u0631\u062A\u06CC\u0628 \u0646\u0645\u0627\u06CC\u0634</span>\n        </div>\n        <mat-menu #orderMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-order-menu\">\n            @for (item of orderKeys; track $index) {\n            <!-- DIVIDER -->\n            @if ($index !== 0) {<mat-divider></mat-divider>}\n\n            <!-- TYPES -->\n            @switch (orders[item].type) {\n            <!-- ORDR -->\n            @case ('ORDER') {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'ASC'\"\n                (click)=\"updateOrder(item, 'ASC')\"\n            >\n                <mat-icon>north</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current === 'DESC'\"\n                (click)=\"updateOrder(item, 'DESC')\"\n            >\n                <mat-icon>south</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            }\n            <!-- ASC, DESC -->\n            @default {\n            <button\n                mat-menu-item\n                type=\"button\"\n                [disabled]=\"orders[item].current\"\n                (click)=\"updateOrder(item, orders[item].type)\"\n            >\n                <mat-icon>{{ orders[item].type === 'ASC' ? 'north' : 'south' }}</mat-icon>\n                <span>{{ orders[item].title }}</span>\n            </button>\n            } } }\n        </mat-menu>\n        }\n\n        <!-- CLEAR -->\n        @if (showClear) {\n        <div\n            class=\"item\"\n            [style.color]=\"viewConfig.highlightText\"\n            [style.border-color]=\"viewConfig.highlightText\"\n            [style.background-color]=\"viewConfig.highlightBackground\"\n            (click)=\"clearFilter.next()\"\n        >\n            <span>\u0644\u063A\u0648 \u0641\u06CC\u0644\u062A\u0631\u0647\u0627</span>\n            <mat-icon>filter_alt_off</mat-icon>\n        </div>\n\n        }\n\n        <!-- FILTER -->\n        @for (item of filterKeys; track $index) {\n        <div\n            class=\"item\"\n            [style.color]=\"filters[item].value ? viewConfig.highlightText : ''\"\n            [style.border-color]=\"filters[item].value ? viewConfig.highlightText : viewConfig.borderColor\"\n            [style.background-color]=\"filters[item].value ? viewConfig.highlightBackground : ''\"\n            (click)=\"updateFilter.next(item)\"\n        >\n            <mat-icon>filter_alt</mat-icon>\n            <span>{{ filters[item].title }}</span>\n        </div>\n        }\n    </div>\n</div>\n\n<div\n    class=\"seperator\"\n    [style.background-color]=\"viewConfig.backgroundColor\"\n    [style.position]=\"viewConfig.stickyView?.headerTop ? 'sticky' : 'static'\"\n    [style.top]=\"'calc(' + (viewConfig.stickyView?.headerTop?.mobileView || undefined) + ' + var(--toolbarHeight) + 2px)'\"\n></div>\n", styles: [".toolbar{z-index:2;height:calc(var(--toolbarHeight) + 2px);overflow-x:hidden}.toolbar .toolbar-items{display:inline-flex;align-items:center;column-gap:.5rem;position:relative;left:0}.toolbar .toolbar-items .item{display:flex;align-items:center;column-gap:.25rem;padding:0 .5rem;border-radius:8px;border:1px solid transparent;height:var(--toolbarHeight)}.toolbar .toolbar-items .item mat-icon{font-size:100%}.toolbar .toolbar-items .item span{font-size:80%;white-space:nowrap}.seperator{z-index:2;height:1rem}\n"] }]
+        }], propDecorators: { orders: [{
+                type: Input,
+                args: [{ required: true }]
+            }], filters: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], orderChanged: [{
+                type: Output
+            }], updateFilter: [{
+                type: Output
+            }], clearFilter: [{
+                type: Output
+            }] } });
+
+class ViewCardComponent {
+    filterService;
+    viewService;
+    toolbarHeight = '32px';
+    ngxTable;
+    data;
+    viewConfig;
+    orderChanged = new EventEmitter();
+    filterChanged = new EventEmitter();
+    filterCleared = new EventEmitter();
+    hasIcon = false;
+    hasAction = false;
+    titleIndex;
+    subTitleIndex;
+    icons = [];
+    colors = [];
+    descriptions = [];
+    deactives = [];
+    orders;
+    filters;
+    hasToolbar = false;
+    headerTop = '';
+    hasContent;
+    constructor(filterService, viewService) {
+        this.filterService = filterService;
+        this.viewService = viewService;
+    }
+    ngOnChanges(changes) {
+        this.hasIcon = !!this.ngxTable.rows?.icon;
+        this.hasAction = (this.ngxTable.actions || []).length > 0;
+        this.titleIndex = this.viewService.getTitleIndex(this.ngxTable);
+        this.subTitleIndex = this.viewService.getSubTitleIndex(this.ngxTable);
+        this.icons = this.viewService.getIcons(this.ngxTable, this.data);
+        this.colors = this.viewService.getColors(this.ngxTable, this.data);
+        this.descriptions = this.viewService.getDescriptions(this.ngxTable, this.data);
+        this.deactives = this.viewService.getDeactives(this.ngxTable, this.data);
+        this.orders = this.viewService.getOrders(this.ngxTable);
+        this.filters = this.filterService.getFilters(this.ngxTable);
+        this.hasToolbar = Object.keys(this.orders).length > 0 || Object.keys(this.filters).length > 0;
+        const top = this.viewConfig.stickyView?.headerTop?.mobileView;
+        this.headerTop = top ? (this.hasToolbar ? `calc(${top} + var(--toolbarHeight) + 1rem + 2px)` : top) : '';
+        this.hasContent = this.ngxTable.columns.some((_, index) => index != this.titleIndex && index !== this.subTitleIndex);
+    }
+    updateFilter(id) {
+        const filter = this.filters[id];
+        if (!filter)
+            return;
+        this.filterService.updateFilter(filter, this.viewConfig).then((filter) => {
+            if (!filter)
+                return;
+            this.filters[id] = filter;
+            this.filterChanged.next({ id, value: filter.value });
+        });
+    }
+    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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { toolbarHeight: [{
+                type: HostBinding,
+                args: ['style.--toolbarHeight']
+            }], ngxTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], orderChanged: [{
+                type: Output
+            }], filterChanged: [{
+                type: Output
+            }], filterCleared: [{
+                type: Output
+            }] } });
+
+class ViewPaginationComponent {
+    elementRef;
+    stylePosition;
+    styleBottom;
+    type;
+    pagination;
+    viewConfig;
+    isMobile;
+    stickyBottom;
+    pageChanged = new EventEmitter();
+    pages = [];
+    hasShadow = false;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        setTimeout(this.onScroll.bind(this), 0);
+    }
+    ngOnChanges(changes) {
+        const isDefaultPage = (page) => page === 1 || page === this.pagination.page.total;
+        const period = Math.floor(this.pagination.page.total / 8) || 1;
+        const trunc = period < 100 ? 10 : period < 1000 ? 100 : 1000;
+        this.pages = Array(this.pagination.page.total)
+            .fill('0')
+            .map((_, index) => index + 1)
+            .filter((page) => page !== this.pagination.page.current)
+            .filter((page) => isDefaultPage(page) || (page - 1) % period === 0)
+            .map((page) => (isDefaultPage(page) || period < 10 ? page : page - (page % trunc)));
+        this.stylePosition = this.stickyBottom ? 'sticky' : 'static';
+        this.styleBottom = this.stickyBottom
+            ? this.isMobile
+                ? this.stickyBottom.mobileView
+                : this.stickyBottom.desktopView
+            : '';
+    }
+    onScroll() {
+        if (!this.elementRef)
+            return;
+        const element = this.elementRef.nativeElement;
+        const elementPosition = element.offsetTop + element.offsetHeight + 8;
+        const parentHeight = element.parentElement?.offsetHeight;
+        this.hasShadow = !!parentHeight && elementPosition < parentHeight;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewPaginationComponent, isStandalone: true, selector: "view-pagination", inputs: { type: "type", pagination: "pagination", viewConfig: "viewConfig", isMobile: "isMobile", stickyBottom: "stickyBottom" }, outputs: { pageChanged: "pageChanged" }, host: { listeners: { "window:scroll": "onScroll($event)" }, properties: { "style.position": "this.stylePosition", "style.bottom": "this.styleBottom" } }, usesOnChanges: true, ngImport: i0, template: "<content\n    [class.desktop]=\"!isMobile\"\n    [class.mobile]=\"isMobile\"\n    [class.shadow]=\"hasShadow\"\n    [style.backgroundColor]=\"viewConfig.paginationBackgroundColor\"\n>\n    <section>\n        <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n        <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n    </section>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.total)\"\n    >\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.current + 1)\"\n    >\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n    <mat-menu #pageMenu=\"matMenu\">\n        @for (page of pages; track $index) {\n        <button\n            mat-menu-item\n            type=\"button\"\n            [disabled]=\"page === pagination.page.current\"\n            class=\"pagination-menu-item\"\n            (click)=\"pageChanged.next(page)\"\n        >\n            {{ page | number }}\n        </button>\n        }\n    </mat-menu>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === 1\"\n        (click)=\"pageChanged.next(pagination.page.current - 1)\"\n    >\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</content>\n", styles: [":host{display:block;margin-top:1rem;z-index:1}:host content{display:flex;align-items:center;margin:0 auto;padding:.5rem 0;background-color:var(--surface-container-low);border-radius:8px;border:1px solid var(--surface-container-highest)}:host content section{display:block;padding-right:.75rem}:host content section .title{font-weight:500;line-height:1}:host content section .total{font-size:80%;opacity:.75;line-height:1;margin-top:.25rem}:host content.desktop{column-gap:.5rem;width:fit-content}:host content.desktop section{min-width:250px}:host content.mobile section{flex:1}:host content.shadow{border:1px solid var(--outline-variant);box-shadow:0 0 10px 0 var(--outline-variant)}::ng-deep .pagination-menu-item{text-align:center!important}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-pagination', host: { '(window:scroll)': 'onScroll($event)' }, imports: [DecimalPipe, MatIconButton, MatIcon, MatMenuModule], template: "<content\n    [class.desktop]=\"!isMobile\"\n    [class.mobile]=\"isMobile\"\n    [class.shadow]=\"hasShadow\"\n    [style.backgroundColor]=\"viewConfig.paginationBackgroundColor\"\n>\n    <section>\n        <div class=\"title\">\u0635\u0641\u062D\u0647 {{ pagination.page.current | number }} \u0627\u0632 {{ pagination.page.total | number }}</div>\n        <div class=\"total\">{{ pagination.item.total | number }} {{ type }}</div>\n    </section>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.total)\"\n    >\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === pagination.page.total\"\n        (click)=\"pageChanged.next(pagination.page.current + 1)\"\n    >\n        <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"pageMenu\"><mat-icon>tag</mat-icon></button>\n    <mat-menu #pageMenu=\"matMenu\">\n        @for (page of pages; track $index) {\n        <button\n            mat-menu-item\n            type=\"button\"\n            [disabled]=\"page === pagination.page.current\"\n            class=\"pagination-menu-item\"\n            (click)=\"pageChanged.next(page)\"\n        >\n            {{ page | number }}\n        </button>\n        }\n    </mat-menu>\n\n    <button\n        mat-icon-button\n        type=\"button\"\n        [disabled]=\"pagination.page.current === 1\"\n        (click)=\"pageChanged.next(pagination.page.current - 1)\"\n    >\n        <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button mat-icon-button type=\"button\" [disabled]=\"pagination.page.current === 1\" (click)=\"pageChanged.next(1)\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n</content>\n", styles: [":host{display:block;margin-top:1rem;z-index:1}:host content{display:flex;align-items:center;margin:0 auto;padding:.5rem 0;background-color:var(--surface-container-low);border-radius:8px;border:1px solid var(--surface-container-highest)}:host content section{display:block;padding-right:.75rem}:host content section .title{font-weight:500;line-height:1}:host content section .total{font-size:80%;opacity:.75;line-height:1;margin-top:.25rem}:host content.desktop{column-gap:.5rem;width:fit-content}:host content.desktop section{min-width:250px}:host content.mobile section{flex:1}:host content.shadow{border:1px solid var(--outline-variant);box-shadow:0 0 10px 0 var(--outline-variant)}::ng-deep .pagination-menu-item{text-align:center!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { stylePosition: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], styleBottom: [{
+                type: HostBinding,
+                args: ['style.bottom']
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pagination: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isMobile: [{
+                type: Input,
+                args: [{ required: true }]
+            }], stickyBottom: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class ViewTableComponent {
+    viewService;
+    filterService;
+    ngxTable;
+    data;
+    viewConfig;
+    orderChanged = new EventEmitter();
+    filterChanged = new EventEmitter();
+    filterCleared = new EventEmitter();
+    hasIcon = false;
+    hasAction = false;
+    titleIndex;
+    subTitleIndex;
+    icons = [];
+    colors = [];
+    descriptions = [];
+    deactives = [];
+    orders;
+    filters;
+    activeFilters = [];
+    constructor(viewService, filterService) {
+        this.viewService = viewService;
+        this.filterService = filterService;
+    }
+    ngOnChanges(changes) {
+        this.hasIcon = !!this.ngxTable.rows?.icon;
+        this.hasAction = (this.ngxTable.actions || []).length > 0;
+        this.titleIndex = this.viewService.getTitleIndex(this.ngxTable);
+        this.subTitleIndex = this.viewService.getSubTitleIndex(this.ngxTable);
+        this.icons = this.viewService.getIcons(this.ngxTable, this.data);
+        this.colors = this.viewService.getColors(this.ngxTable, this.data);
+        this.descriptions = this.viewService.getDescriptions(this.ngxTable, this.data);
+        this.deactives = this.viewService.getDeactives(this.ngxTable, this.data);
+        this.orders = this.viewService.getOrders(this.ngxTable);
+        this.filters = this.filterService.getFilters(this.ngxTable);
+        this.activeFilters = Object.keys(this.filters)
+            .filter((id) => this.filters[id].value !== undefined)
+            .map((id) => ({
+            id,
+            title: this.filters[id].title,
+            ...FilterInfo[this.filters[id].filter.type].methods.active(this.filters[id].value, this.filters[id].filter),
+        }));
+    }
+    updateOrder(id) {
+        const order = this.orders[id];
+        if (!order || order.type === order.current)
+            return;
+        const type = order.current ? (order.current === 'ASC' ? 'DESC' : 'ASC') : order.initial;
+        this.orderChanged.next({ id, type });
+    }
+    updateFilter(id) {
+        const filter = this.filters[id];
+        if (!filter)
+            return;
+        this.filterService.updateFilter(filter, this.viewConfig).then((filter) => {
+            if (!filter)
+                return;
+            this.filters[id] = filter;
+            this.filterChanged.next({ id, value: filter.value });
+        });
+    }
+    clearFilter(id) {
+        const filter = this.filters[id];
+        if (!filter)
+            return;
+        this.filters[id] = { ...this.filters[id], value: undefined };
+        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: [
+            trigger('toolbar', [
+                transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-table', imports: [NgClass, MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent], providers: [FilterService, ViewService], animations: [
+                        trigger('toolbar', [
+                            transition(':enter', [style({ opacity: 0, height: 0 }), animate('150ms', style({ opacity: 1, height: '*' }))]),
+                        ]),
+                    ], template: "<table [cellPadding]=\"0\" [cellSpacing]=\"0\" [width]=\"'100%'\" [border]=\"0\">\n    <!-- HEADER -->\n\n    <thead\n        [style.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"] }]
+        }], ctorParameters: () => [{ type: ViewService }, { type: FilterService }], propDecorators: { ngxTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], orderChanged: [{
+                type: Output
+            }], filterChanged: [{
+                type: Output
+            }], filterCleared: [{
+                type: Output
+            }] } });
+
+const NGX_TABLE_CONFIG = new InjectionToken('NGX-TABLE-CONFIG');
+const provideNgxTableConfig = (config) => {
+    const providers = [{ provide: NGX_TABLE_CONFIG, useValue: config }];
+    return makeEnvironmentProviders(providers);
+};
+
+class NgxTableComponent {
+    activatedRoute;
+    router;
+    filterService;
+    viewService;
+    config;
+    loading;
+    ngxTable;
+    data;
+    pagination;
+    filterChanged = new EventEmitter();
+    isMobile = false;
+    loaderClass;
+    emptyClass;
+    viewConfig;
+    filter;
+    hasFilter = false;
+    constructor(activatedRoute, router, filterService, viewService, config) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.filterService = filterService;
+        this.viewService = viewService;
+        this.config = config;
+    }
+    ngOnInit() {
+        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+        const page = !!this.ngxTable.route
+            ? Helper.IS.number(+queryParams['ngx-table-page'])
+                ? +queryParams['ngx-table-page']
+                : 1
+            : 1;
+        const orders = this.viewService.getOrders(this.ngxTable);
+        let order = undefined;
+        Object.keys(orders).forEach((id) => {
+            if (!orders[id].current)
+                return;
+            const type = orders[id].current;
+            order = { id, type: type, param: `${id}:${type}` };
+        });
+        const filters = this.filterService.getFilters(this.ngxTable);
+        const filter = {};
+        Object.keys(filters).forEach((id) => {
+            if (filters[id].value === undefined)
+                return;
+            const column = this.ngxTable.columns.find((column) => column.tools?.id === id);
+            if (!column || !column.tools || !('filter' in column.tools) || !column.tools.filter)
+                return;
+            const param = column.tools.filter.toParam?.(filters[id].value) ||
+                FilterInfo[column.tools.filter.type].methods.toParam(filters[id].value);
+            filter[id] = { value: filters[id].value, param };
+        });
+        this.filter = { page, order, filter };
+        this.filterChanged.next(this.filter);
+    }
+    ngOnChanges(changes) {
+        this.ngxTable = {
+            ...this.ngxTable,
+            columns: this.ngxTable.columns.map((column) => ColumnInfo[column.type].methods.column(column)),
+        };
+        this.loaderClass = this.config?.cssClasses?.loader || 'ngx-table-loader';
+        this.emptyClass = this.config?.cssClasses?.empty || 'ngx-table-empty';
+        const getStickyView = (config) => {
+            return {
+                desktopView: typeof config === 'string' ? config : config.desktopView,
+                mobileView: typeof config === 'string' ? config : config.mobileView,
+            };
+        };
+        this.viewConfig = {
+            alternateRows: !!this.config?.alternateRows,
+            iconSize: `${this.config?.iconSize || 24}px`,
+            enClass: this.config?.cssClasses?.en || 'ngx-table-en',
+            deactiveClass: this.config?.cssClasses?.deactive || 'ngx-table-deactive',
+            borderColor: this.config?.colors?.border || 'var(--outline-variant)',
+            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)',
+            paginationBackgroundColor: this.config?.colors?.paginationBackground || 'var(--background)',
+            highlightText: this.config?.colors?.highlightText || 'var(--secondary)',
+            highlightBackground: this.config?.colors?.highlightBackground || 'var(--secondary-container)',
+            inputText: this.config?.colors?.inputText || 'var(--on-surface)',
+            inputBackground: this.config?.colors?.inputBackground || 'var(--surface-container-highest)',
+            actionButtonSize: this.config?.action?.buttonSize || '90%',
+            actionButtonColor: this.config?.action?.buttonColor || 'var(--primary)',
+            actionMenuColor: this.config?.action?.buttonColor || '',
+            actionWarnColor: this.config?.action?.warnColor || 'var(--error)',
+            actionMenuTitle: this.config?.action?.menuTitle || 'امکانات',
+            stickyView: this.config?.stickyView
+                ? {
+                    headerTop: this.config.stickyView.headerTop
+                        ? getStickyView(this.config.stickyView.headerTop)
+                        : undefined,
+                    paginationBottom: this.config.stickyView.paginationBottom
+                        ? getStickyView(this.config.stickyView.paginationBottom)
+                        : undefined,
+                }
+                : undefined,
+        };
+        this.hasFilter = this.filter && Object.keys(this.filter).length !== 0;
+        this.onResize();
+    }
+    onResize() {
+        const mobileWidth = this.config?.mobileWidth || 600;
+        this.isMobile = this.ngxTable.mobileView || window.innerWidth <= mobileWidth;
+    }
+    setQueryParams() {
+        if (!this.ngxTable.route)
+            return;
+        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+        const keys = Object.keys(queryParams);
+        keys.forEach((id) => id.substring(0, 17) === 'ngx-table-filter-' && delete queryParams[id]);
+        queryParams['ngx-table-page'] = this.filter.page !== 1 ? this.filter.page.toString() : undefined;
+        queryParams['ngx-table-order'] = this.filter.order ? this.filter.order.param : undefined;
+        Object.keys(this.filter.filter).forEach((id) => {
+            const column = this.ngxTable.columns.find((column) => column.tools?.id === id);
+            if (!column || !column.tools || !('filter' in column.tools) || !column.tools.filter)
+                return;
+            const param = FilterInfo[column.tools.filter.type].methods.query(this.filter.filter[id].value);
+            queryParams[`ngx-table-filter-${id}`] = param;
+        });
+        this.router.navigate(this.ngxTable.route, { queryParams });
+    }
+    pageChanged(page) {
+        this.filter = { ...this.filter, page };
+        this.setQueryParams();
+        this.filterChanged.next(this.filter);
+    }
+    orderChanged(order) {
+        const param = `${order.id}:${order.type}`;
+        this.filter = { ...this.filter, order: { ...order, param } };
+        this.setQueryParams();
+        this.filterChanged.next(this.filter);
+    }
+    filterItemChanged(filter) {
+        const column = this.ngxTable.columns.find((column) => column.tools?.id === filter.id);
+        if (!column || !column.tools || !('filter' in column.tools) || !column.tools.filter)
+            return;
+        if (filter.value === undefined)
+            delete this.filter.filter[filter.id];
+        else {
+            const param = column.tools.filter.toParam?.(filter.value) ||
+                FilterInfo[column.tools.filter.type].methods.toParam(filter.value);
+            this.filter.filter[filter.id] = { value: filter.value, param };
+        }
+        this.setQueryParams();
+        this.filterChanged.next(this.filter);
+    }
+    filterCleared() {
+        this.filter = { ...this.filter, filter: {} };
+        this.setQueryParams();
+        this.filterChanged.next(this.filter);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxTableComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: FilterService }, { token: ViewService }, { token: NGX_TABLE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxTableComponent, isStandalone: true, selector: "ngx-table", inputs: { loading: "loading", ngxTable: "ngxTable", data: "data", pagination: "pagination" }, outputs: { filterChanged: "filterChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<div [ngClass]=\"loaderClass\"></div>\n}\n\n<!-- EMPTY -->\n@if (!loading && data.length === 0 && !hasFilter) {\n<div [ngClass]=\"emptyClass\" [dir]=\"'rtl'\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && (data.length > 0 || hasFilter)) {\n<content>\n    <!-- DESKTOP -->\n    @if (!isMobile) {\n    <view-table\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-table>\n    }\n\n    <!-- MOBILE -->\n    @if (isMobile) {\n    <view-card\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-card>\n    }\n\n    <!-- PAGINATION -->\n    @if (pagination && pagination.page.total> 1) {\n    <view-pagination\n        [type]=\"ngxTable.type\"\n        [pagination]=\"pagination\"\n        [viewConfig]=\"viewConfig\"\n        [isMobile]=\"isMobile\"\n        [stickyBottom]=\"viewConfig.stickyView?.paginationBottom\"\n        (pageChanged)=\"pageChanged($event)\"\n    ></view-pagination>\n    }\n\n    <!-- EMPTY -->\n    @if ( data.length === 0) {\n    <div [ngClass]=\"emptyClass\" [dir]=\"'rtl'\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n    }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ViewCardComponent, selector: "view-card", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }, { kind: "component", type: ViewPaginationComponent, selector: "view-pagination", inputs: ["type", "pagination", "viewConfig", "isMobile", "stickyBottom"], outputs: ["pageChanged"] }, { kind: "component", type: ViewTableComponent, selector: "view-table", inputs: ["ngxTable", "data", "viewConfig"], outputs: ["orderChanged", "filterChanged", "filterCleared"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-table', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, ViewCardComponent, ViewPaginationComponent, ViewTableComponent], providers: [FilterService, ViewService], template: "@if (loading) {\n<div [ngClass]=\"loaderClass\"></div>\n}\n\n<!-- EMPTY -->\n@if (!loading && data.length === 0 && !hasFilter) {\n<div [ngClass]=\"emptyClass\" [dir]=\"'rtl'\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n}\n\n<!-- DATA -->\n@if (!loading && (data.length > 0 || hasFilter)) {\n<content>\n    <!-- DESKTOP -->\n    @if (!isMobile) {\n    <view-table\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-table>\n    }\n\n    <!-- MOBILE -->\n    @if (isMobile) {\n    <view-card\n        [ngxTable]=\"ngxTable\"\n        [data]=\"data\"\n        [viewConfig]=\"viewConfig\"\n        (orderChanged)=\"orderChanged($event)\"\n        (filterChanged)=\"filterItemChanged($event)\"\n        (filterCleared)=\"filterCleared()\"\n    ></view-card>\n    }\n\n    <!-- PAGINATION -->\n    @if (pagination && pagination.page.total> 1) {\n    <view-pagination\n        [type]=\"ngxTable.type\"\n        [pagination]=\"pagination\"\n        [viewConfig]=\"viewConfig\"\n        [isMobile]=\"isMobile\"\n        [stickyBottom]=\"viewConfig.stickyView?.paginationBottom\"\n        (pageChanged)=\"pageChanged($event)\"\n    ></view-pagination>\n    }\n\n    <!-- EMPTY -->\n    @if ( data.length === 0) {\n    <div [ngClass]=\"emptyClass\" [dir]=\"'rtl'\">{{ ngxTable.type }} \u062B\u0628\u062A \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.</div>\n    }\n</content>\n}\n", styles: ["content{display:block;direction:rtl;position:relative}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: FilterService }, { type: ViewService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_TABLE_CONFIG]
+                }] }], propDecorators: { loading: [{
+                type: Input,
+                args: [{ required: true }]
+            }], ngxTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pagination: [{
+                type: Input,
+                args: [{ required: false }]
+            }], filterChanged: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ngx-table-m3
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_TABLE_CONFIG, NgxTableComponent, provideNgxTableConfig };
+//# sourceMappingURL=webilix-ngx-table-m3.mjs.map