@webilix/ngx-table-m3 0.0.24 → 0.0.26

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

@@ -17,7 +17,7 @@ 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 * as i3 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { trigger, transition, style, animate } from '@angular/animations';
 
@@ -729,6 +729,41 @@ class ColumnPeriodMethods extends ColumnMethods {
     }
 }
 
+class ColumnTagComponent {
+    router;
+    column = inject(COLUMN_TYPE);
+    value = inject(COLUMN_VALUE);
+    config = inject(COLUMN_CONFIG);
+    constructor(router) {
+        this.router = router;
+    }
+    onTagClick(id) {
+        if (!this.column.onTagClick)
+            return;
+        const action = this.column.onTagClick(id);
+        if (action)
+            this.router.navigate(action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ColumnTagComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ColumnTagComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "column-tag" } }, ngImport: i0, template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    @for (item of value; track $index) {\n    <div class=\"tag\" [class.tag-action]=\"!!column.onTagClick\" (click)=\"onTagClick(item.id)\">\n        @if (column.onTagClick) { <mat-icon>open_in_new</mat-icon> }\n        <div class=\"title\">{{ item.title }}</div>\n    </div>\n    }\n</div>\n", styles: [".tag{display:flex;align-items:center}.tag .title{flex:1;font-size:85%}.tag mat-icon{font-size:85%}.tag-action{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ColumnTagComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'column-tag' }, imports: [MatIcon], template: "<div [style.display]=\"'inline-block'\" [class.ngx-table-m3-deactive]=\"config.isDeactive\">\n    @for (item of value; track $index) {\n    <div class=\"tag\" [class.tag-action]=\"!!column.onTagClick\" (click)=\"onTagClick(item.id)\">\n        @if (column.onTagClick) { <mat-icon>open_in_new</mat-icon> }\n        <div class=\"title\">{{ item.title }}</div>\n    </div>\n    }\n</div>\n", styles: [".tag{display:flex;align-items:center}.tag .title{flex:1;font-size:85%}.tag mat-icon{font-size:85%}.tag-action{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }] });
+
+class ColumnTagMethods extends ColumnMethods {
+    column(column) {
+        return { ...column, title: column.title || 'تگ' };
+    }
+    value(value, column) {
+        const list = (Helper.IS.array(value) ? value : [])
+            .filter((item) => !!item.id && !!item.title)
+            .sort((i1, i2) => i1.title.localeCompare(i2.title));
+        return list.length > 0 ? list : undefined;
+    }
+}
+
 class ColumnTextComponent {
     column = inject(COLUMN_TYPE);
     value = inject(COLUMN_VALUE);
@@ -778,12 +813,119 @@ const ColumnInfo = {
     MOBILE: { methods: new ColumnMobileMethods(), component: ColumnMobileComponent },
     NUMBER: { methods: new ColumnNumberMethods(), component: ColumnNumberComponent },
     PERIOD: { methods: new ColumnPeriodMethods(), component: ColumnPeriodComponent },
+    TAG: { methods: new ColumnTagMethods(), component: ColumnTagComponent },
     TEXT: { methods: new ColumnTextMethods(), component: ColumnTextComponent },
     WEIGHT: { methods: new ColumnWeightMethods(), component: ColumnWeightComponent },
 };
 
+class ViewService {
+    activatedRoute;
+    constructor(activatedRoute) {
+        this.activatedRoute = activatedRoute;
+    }
+    getTitleIndex(ngxTable) {
+        const index = ngxTable.columns.findIndex((l) => 'mode' in l && l.mode === 'TITLE');
+        return index === -1 ? 0 : index;
+    }
+    getSubTitleIndex(ngxTable) {
+        const index = ngxTable.columns.findIndex((l) => 'mode' in l && l.mode === 'SUBTITLE');
+        return index === -1 ? undefined : index;
+    }
+    getValue(column, item) {
+        const value = typeof column.value === 'function' ? column.value(item) : item[column.value];
+        if (Helper.IS.empty(value))
+            return undefined;
+        return ColumnInfo[column.type].methods.value(value, column);
+    }
+    getIcons(ngxTable, data) {
+        const iconFn = ngxTable.rows?.icon;
+        if (!iconFn)
+            return [];
+        return data.map((item, index) => {
+            const icon = iconFn(item, index);
+            return typeof icon === 'string'
+                ? { icon }
+                : 'emoji' in icon
+                    ? { icon: '' }
+                    : { icon: icon.icon, color: icon.color || undefined };
+        });
+    }
+    getEmojis(ngxTable, data) {
+        const iconFn = ngxTable.rows?.icon;
+        if (!iconFn)
+            return [];
+        return data.map((item, index) => {
+            const icon = iconFn(item, index);
+            return typeof icon === 'string' ? '' : 'emoji' in icon ? icon.emoji : '';
+        });
+    }
+    getColors(ngxTable, data) {
+        const colorFn = ngxTable.rows?.color;
+        if (!colorFn)
+            return [];
+        return data.map((item, index) => colorFn(item, index) || '');
+    }
+    getDescriptions(ngxTable, data) {
+        const descriptionFn = ngxTable.rows?.description;
+        if (!descriptionFn)
+            return [];
+        return data.map((item, index) => descriptionFn(item, index) || undefined);
+    }
+    getDeactives(ngxTable, data) {
+        const deactives = [];
+        data.forEach((item, index) => {
+            if (ngxTable.rows?.isDeactive?.(item, index))
+                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: "20.1.4", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
+
 class ViewValueComponent {
     router;
+    viewService;
     className = 'ngx-table-m3-value';
     textAlign = 'left';
     column;
@@ -802,20 +944,22 @@ class ViewValueComponent {
     copyText;
     isCopied = false;
     copyTimeout;
-    constructor(router) {
+    constructor(router, viewService) {
         this.router = router;
+        this.viewService = viewService;
     }
     ngOnChanges(changes) {
         this.textAlign = this.isCard ? 'right' : (this.column.textAlign || 'RIGHT').toLocaleLowerCase();
-        this.value = this.getValue();
+        this.value = this.viewService.getValue(this.column, this.item);
         this.subValue = this.getSubValue();
         this.color = this.column.color
             ? typeof this.column.color === 'function'
                 ? this.column.color(this.item) || undefined
                 : this.column.color
             : undefined;
-        this.hasClick = !!this.column.onClick;
-        this.copyText = !this.hasClick && this.column.onCopy ? this.column.onCopy(this.item) : undefined;
+        this.hasClick = 'onClick' in this.column && !!this.column.onClick;
+        this.copyText =
+            !this.hasClick && 'onCopy' in this.column && this.column.onCopy ? this.column.onCopy(this.item) : undefined;
         const columnConfig = {
             isEN: 'english' in this.column && this.column.english
                 ? typeof this.column.english === 'function'
@@ -832,14 +976,8 @@ class ViewValueComponent {
             ],
         });
     }
-    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)
+        if (!('subValue' in this.column) || !this.column.subValue)
             return undefined;
         if (typeof this.column.subValue === 'function') {
             const subValue = this.column.subValue(this.item);
@@ -858,7 +996,7 @@ class ViewValueComponent {
         }
     }
     onClick() {
-        if (!this.column.onClick)
+        if (!('onClick' in this.column) || !this.column.onClick)
             return;
         const onClick = this.column.onClick(this.item);
         if (typeof onClick === 'function')
@@ -877,13 +1015,13 @@ class ViewValueComponent {
             this.copyTimeout = undefined;
         }, 2000);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "className": "this.className", "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewValueComponent, deps: [{ token: i1$1.Router }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ViewValueComponent, isStandalone: true, selector: "view-value", inputs: { column: "column", item: "item", viewConfig: "viewConfig", isDeactive: "isDeactive", isCard: "isCard", isCardTitle: "isCardTitle", isCardSubTitle: "isCardSubTitle" }, host: { properties: { "className": "this.className", "style.text-align": "this.textAlign" } }, usesOnChanges: true, ngImport: i0, template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.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: "20.1.4", ngImport: i0, type: ViewValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-value', imports: [NgComponentOutlet, ClipboardModule, MatIcon], template: "<!-- EMPTY VALUE -->\n@if (value === undefined) { }\n\n<!-- SHOW VALUE -->\n@else {\n<div class=\"value-container\" [style.color]=\"color\" [class.card-title]=\"isCardTitle\" [class.card-sub-title]=\"isCardSubTitle\">\n    <div\n        class=\"value\"\n        [style.cursor]=\"hasClick || copyText ? 'pointer' : 'default'\"\n        (click)=\"hasClick ? onClick() : copyText ? onCopy() : null\"\n        [cdkCopyToClipboard]=\"copyText || ''\"\n    >\n        <ng-container *ngComponentOutlet=\"columnInfo[column.type].component; injector: injector\"></ng-container>\n        <!-- CLICK -->\n        @if (hasClick) { <mat-icon>open_in_new</mat-icon> }\n        <!-- COPY -->\n        @if (copyText) { <mat-icon>{{ isCopied ? 'done_all' : 'copy' }}</mat-icon> }\n    </div>\n\n    <!-- SUB VALUE -->\n    @if (subValue) {\n    <div class=\"sub-value\" [class.ngx-table-m3-en]=\"subValue.isEN\">{{ subValue.value }}</div>\n    }\n</div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { className: [{
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: ViewService }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
             }], textAlign: [{
@@ -912,105 +1050,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 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, index) => {
-            const icon = iconFn(item, index);
-            return typeof icon === 'string'
-                ? { icon }
-                : 'emoji' in icon
-                    ? { icon: '' }
-                    : { icon: icon.icon, color: icon.color || undefined };
-        });
-    }
-    getEmojis(ngxTable, data) {
-        const iconFn = ngxTable.rows?.icon;
-        if (!iconFn)
-            return [];
-        return data.map((item, index) => {
-            const icon = iconFn(item, index);
-            return typeof icon === 'string' ? '' : 'emoji' in icon ? icon.emoji : '';
-        });
-    }
-    getColors(ngxTable, data) {
-        const colorFn = ngxTable.rows?.color;
-        if (!colorFn)
-            return [];
-        return data.map((item, index) => colorFn(item, index) || '');
-    }
-    getDescriptions(ngxTable, data) {
-        const descriptionFn = ngxTable.rows?.description;
-        if (!descriptionFn)
-            return [];
-        return data.map((item, index) => descriptionFn(item, index) || undefined);
-    }
-    getDeactives(ngxTable, data) {
-        const deactives = [];
-        data.forEach((item, index) => {
-            if (ngxTable.rows?.isDeactive?.(item, index))
-                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: "20.1.4", ngImport: i0, type: ViewService, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }] });
-
 class ViewCardToolbarComponent {
     className = 'ngx-table-m3-card-view-toolbar';
     orders;
@@ -1133,7 +1172,9 @@ class ViewCardComponent {
         this.hasToolbar = Object.keys(this.orders).length > 0 || Object.keys(this.filters).length > 0;
         const top = this.viewConfig.stickyView?.top?.mobileView;
         this.top = top ? (this.hasToolbar ? `calc(${top} + var(--ngx-table-m3-toolbar-height) + 1rem + 2px)` : top) : '';
-        this.hasContent = this.ngxTable.columns.some((_, index) => index != this.titleIndex && index !== this.subTitleIndex);
+        this.hasContent =
+            this.descriptions.some((d) => !!d) ||
+                this.ngxTable.columns.some((_, index) => index != this.titleIndex && index !== this.subTitleIndex);
     }
     updateFilter(id) {
         const filter = this.filters[id];
@@ -1146,12 +1187,23 @@ class ViewCardComponent {
             this.filterChanged.next({ id, value: filter.value });
         });
     }
+    showContent(dataInndex) {
+        if (!this.viewConfig.minimalCardView)
+            return true;
+        const hasColumn = this.ngxTable.columns.some((column, index) => index != this.titleIndex && index !== this.subTitleIndex && this.showItem(column, this.data[dataInndex]));
+        return !!this.descriptions[dataInndex] || hasColumn;
+    }
+    showItem(column, item) {
+        if (!this.viewConfig.minimalCardView)
+            return true;
+        return !!this.viewService.getValue(column, item);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewCardComponent, deps: [{ token: FilterService }, { token: ViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ViewCardComponent, isStandalone: true, selector: "view-card", inputs: { ngxTable: "ngxTable", data: "data", viewConfig: "viewConfig" }, outputs: { orderChanged: "orderChanged", filterChanged: "filterChanged", filterCleared: "filterCleared" }, host: { properties: { "className": "this.className" } }, providers: [FilterService, ViewService], usesOnChanges: true, ngImport: i0, template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent && showContent(dataIndex)) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE AND VALUE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex && showItem(column, item)) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n" }]
+            args: [{ selector: 'view-card', imports: [MatIcon, NgxHelperMultiLinePipe, ViewActionComponent, ViewValueComponent, ViewCardToolbarComponent], providers: [FilterService, ViewService], template: "<!-- TOOLBAR -->\n@if (hasToolbar) {\n<view-card-toolbar\n    [orders]=\"orders\"\n    [filters]=\"filters\"\n    [viewConfig]=\"viewConfig\"\n    (orderChanged)=\"orderChanged.next($event)\"\n    (updateFilter)=\"updateFilter($event)\"\n    (clearFilter)=\"filterCleared.next()\"\n></view-card-toolbar>\n}\n\n<!-- DATA -->\n<div class=\"card-container\">\n    @for (item of data; track $index; let dataIndex = $index) {\n    <div class=\"card\">\n        <div class=\"card-header\" [style.position]=\"viewConfig.stickyView?.top ? 'sticky' : 'static'\" [style.top]=\"top\">\n            <!-- ICON -->\n            @if (hasIcon) {\n            <!-- MATERIAL ICON -->\n            @if (icons[$index].icon) {\n            <mat-icon class=\"icon\" [style.color]=\"icons[$index].color\" [style.font-size]=\"viewConfig.iconSize\">\n                {{ icons[$index].icon }}\n            </mat-icon>\n            }\n            <!-- EMOJI  -->\n            @else {\n            <td class=\"emoji\" [style.font-size]=\"viewConfig.emojiSize\">{{ emojis[$index] || '' }}</td>\n            } }\n\n            <!-- TITLE -->\n            <div class=\"title\" [style.color]=\"colors[dataIndex]\">\n                <view-value\n                    [column]=\"ngxTable.columns[this.titleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isDeactive]=\"deactives.includes(dataIndex)\"\n                    [isCard]=\"true\"\n                    [isCardTitle]=\"true\"\n                ></view-value>\n                <!-- SUB TITLE -->\n                @if (subTitleIndex !== undefined) {\n                <view-value\n                    [column]=\"ngxTable.columns[this.subTitleIndex]\"\n                    [item]=\"item\"\n                    [viewConfig]=\"viewConfig\"\n                    [isCard]=\"true\"\n                    [isCardSubTitle]=\"true\"\n                ></view-value>\n                }\n            </div>\n\n            <!-- ACTION -->\n            @if (hasAction) {\n            <view-action\n                [actions]=\"ngxTable.actions || []\"\n                [item]=\"item\"\n                [viewConfig]=\"viewConfig\"\n                [isMobile]=\"true\"\n            ></view-action>\n            }\n        </div>\n\n        <!-- CONTENT -->\n        @if (hasContent && showContent(dataIndex)) {\n        <div class=\"card-content\" [style.color]=\"colors[dataIndex]\">\n            @for (column of ngxTable.columns; track $index; let columnIndex = $index) {\n            <!-- CHECK TITLE AND SUBTITLE AND VALUE -->\n            @if (columnIndex !== titleIndex && columnIndex !== subTitleIndex && showItem(column, item)) {\n            <div class=\"item\">\n                <div class=\"title\">{{ column.title }}{{ !!column.title ? ' :' : '' }}</div>\n                <div class=\"value\">\n                    <view-value [column]=\"column\" [item]=\"item\" [viewConfig]=\"viewConfig\" [isCard]=\"true\"></view-value>\n                </div>\n            </div>\n            } }\n\n            <!-- DESCRIPTION -->\n            @if (descriptions[dataIndex]) {\n            <div class=\"description\" [innerHTML]=\"descriptions[dataIndex] || '' | ngxHelperMultiLine\"></div>\n            }\n        </div>\n        }\n    </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [{ type: FilterService }, { type: ViewService }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
@@ -1429,6 +1481,7 @@ class NgxTableComponent {
             iconSize: `${this.config?.iconSize || 24}px`,
             emojiSize: `${this.config?.emojiSize || 19}px`,
             actionMenuTitle: this.config?.actionMenuTitle || 'امکانات',
+            minimalCardView: !!this.config?.minimalCardView,
             stickyView: this.config?.stickyView
                 ? {
                     top: this.config.stickyView.top ? getStickyView(this.config.stickyView.top) : undefined,