@webilix/ngx-table-m3 0.0.2 → 0.0.4

package/lib/columns/column.interface.d.ts

@@ -36,9 +36,7 @@ export declare abstract class ColumnMethods<C /** COLUMN **/, V /** VALUE **/> {
 }
 export interface IColumnConfig {
     readonly isEN: boolean;
-    readonly enClass: string;
     readonly isDeactive: boolean;
-    readonly deactiveClass: string;
 }
 export declare const COLUMN_TYPE: InjectionToken<any>;
 export declare const COLUMN_CONFIG: InjectionToken<IColumnConfig>;

package/lib/filters/filter.component.d.ts

@@ -3,6 +3,7 @@ import { IViewConfig } from '../views';
 import { IFilter } from './filter.interface';
 import * as i0 from "@angular/core";
 export declare class FilterComponent implements OnInit {
+    private className;
     data: {
         filter: IFilter;
         viewConfig: IViewConfig;

package/lib/filters/multi-select/filter-multi-select.component.d.ts

@@ -2,6 +2,7 @@ import { IViewConfig } from '../../views';
 import { IFilterMultiSelect } from './filter-multi-select.interface';
 import * as i0 from "@angular/core";
 export declare class FilterMultiSelectComponent {
+    private className;
     data: {
         filter: IFilterMultiSelect;
         viewConfig: IViewConfig;

package/lib/filters/search/filter-search.component.d.ts

@@ -3,6 +3,7 @@ import { IViewConfig } from '../../views';
 import { IFilterSearch, IFilterSearchValue } from './filter-search.interface';
 import * as i0 from "@angular/core";
 export declare class FilterSearchComponent implements AfterViewInit {
+    private className;
     private searchInput?;
     data: {
         filter: IFilterSearch;

package/lib/filters/select/filter-select.component.d.ts

@@ -2,6 +2,7 @@ import { IViewConfig } from '../../views';
 import { IFilterSelect } from './filter-select.interface';
 import * as i0 from "@angular/core";
 export declare class FilterSelectComponent {
+    private className;
     data: {
         filter: IFilterSelect;
         viewConfig: IViewConfig;

package/lib/ngx-table.component.d.ts

@@ -18,8 +18,6 @@ export declare class NgxTableComponent<T> implements OnInit, OnChanges {
     pagination?: INgxTablePagination | null;
     filterChanged: EventEmitter<INgxTableFilter>;
     isMobile: boolean;
-    loaderClass: string;
-    emptyClass: string;
     viewConfig: IViewConfig;
     private filter;
     hasFilter: boolean;

package/lib/ngx-table.config.d.ts

@@ -3,39 +3,13 @@ export interface INgxTableConfig {
     readonly mobileWidth: number;
     readonly alternateRows: boolean;
     readonly iconSize: number;
-    readonly cssClasses: {
-        readonly loader?: string;
-        readonly empty?: string;
-        readonly en?: string;
-        readonly deactive?: string;
-    };
-    readonly colors: {
-        readonly border?: string;
-        readonly background?: string;
-        readonly headerText?: string;
-        readonly headerBackground?: string;
-        readonly oddRowsBackground?: string;
-        readonly evenRowsBackground?: string;
-        readonly cardBackground?: string;
-        readonly paginationBackground?: string;
-        readonly highlightText?: string;
-        readonly highlightBackground?: string;
-        readonly inputText?: string;
-        readonly inputBackground?: string;
-    };
-    readonly action: {
-        readonly buttonSize?: string;
-        readonly buttonColor?: string;
-        readonly menuColor?: string;
-        readonly warnColor?: string;
-        readonly menuTitle?: string;
-    };
+    readonly actionMenuTitle?: string;
     readonly stickyView: {
-        readonly headerTop?: string | {
+        readonly top?: string | {
             readonly desktopView: string;
             readonly mobileView: string;
         };
-        readonly paginationBottom?: string | {
+        readonly bottom?: string | {
             readonly desktopView: string;
             readonly mobileView: string;
         };

package/lib/views/action/view-action.component.d.ts

@@ -7,11 +7,12 @@ interface Action<T> {
     readonly title: string;
     readonly icon: string;
     readonly action: (data: T) => string[] | void;
-    readonly color: string;
+    readonly color?: string;
     readonly isDisabled: boolean;
 }
 export declare class ViewActionComponent<T> implements OnChanges {
     private readonly router;
+    private className;
     actions: NgxTableAction<T>[];
     item: T;
     viewConfig: IViewConfig;

package/lib/views/card/toolbar/view-card-toolbar.component.d.ts

@@ -4,6 +4,7 @@ import { IViewConfig, IViewOrder } from '../../view.interface';
 import { Orders } from '../../view.service';
 import * as i0 from "@angular/core";
 export declare class ViewCardToolbarComponent implements OnChanges {
+    private className;
     orders: Orders;
     filters: Filters;
     viewConfig: IViewConfig;
@@ -17,7 +18,7 @@ export declare class ViewCardToolbarComponent implements OnChanges {
     private swipeLeft;
     ngOnChanges(changes: SimpleChanges): void;
     updateOrder(id: string, type: 'ASC' | 'DESC'): void;
-    swipe(event: MouseEvent | TouchEvent, action: 'START' | 'MOVE' | 'END', toolbar: HTMLElement, container: HTMLElement): void;
+    swipe(event: MouseEvent | TouchEvent, action: 'START' | 'MOVE' | 'END', container: HTMLElement, items: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewCardToolbarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ViewCardToolbarComponent, "view-card-toolbar", never, { "orders": { "alias": "orders"; "required": true; }; "filters": { "alias": "filters"; "required": true; }; "viewConfig": { "alias": "viewConfig"; "required": true; }; }, { "orderChanged": "orderChanged"; "updateFilter": "updateFilter"; "clearFilter": "clearFilter"; }, never, never, true, never>;
 }

package/lib/views/card/view-card.component.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 export declare class ViewCardComponent<T> implements OnChanges {
     private readonly filterService;
     private readonly viewService;
-    private toolbarHeight;
+    private className;
     ngxTable: INgxTable<T>;
     data: T[];
     viewConfig: IViewConfig;
@@ -28,7 +28,7 @@ export declare class ViewCardComponent<T> implements OnChanges {
     orders: Orders;
     filters: Filters;
     hasToolbar: boolean;
-    headerTop: string;
+    top: string;
     hasContent: boolean;
     constructor(filterService: FilterService, viewService: ViewService);
     ngOnChanges(changes: SimpleChanges): void;

package/lib/views/pagination/view-pagination.component.d.ts

@@ -4,6 +4,7 @@ import { IViewConfig } from '..';
 import * as i0 from "@angular/core";
 export declare class ViewPaginationComponent implements OnInit, OnChanges {
     private readonly elementRef;
+    private className;
     private stylePosition;
     private styleBottom;
     type: string;

package/lib/views/table/view-table.component.d.ts

@@ -7,6 +7,7 @@ import * as i0 from "@angular/core";
 export declare class ViewTableComponent<T> implements OnChanges {
     private readonly viewService;
     private readonly filterService;
+    private className;
     ngxTable: INgxTable<T>;
     data: T[];
     viewConfig: IViewConfig;

package/lib/views/value/view-value.component.d.ts

@@ -5,6 +5,7 @@ import { IViewConfig } from '../view.interface';
 import * as i0 from "@angular/core";
 export declare class ViewValueComponent<T> implements OnChanges {
     private readonly router;
+    private className;
     private textAlign;
     column: NgxTableColumn<T>;
     item: T;

package/lib/views/view.interface.d.ts

@@ -1,31 +1,13 @@
 export interface IViewConfig {
     readonly alternateRows: boolean;
     readonly iconSize: string;
-    readonly enClass: string;
-    readonly deactiveClass: string;
-    readonly borderColor: string;
-    readonly backgroundColor: string;
-    readonly headerTextColor: string;
-    readonly headerBackgroundColor: string;
-    readonly oddRowsBackgroundColor: string;
-    readonly evenRowsBackgroundColor: string;
-    readonly cardBackgroundColor: string;
-    readonly paginationBackgroundColor: string;
-    readonly highlightText: string;
-    readonly highlightBackground: string;
-    readonly inputText: string;
-    readonly inputBackground: string;
-    readonly actionButtonSize: string;
-    readonly actionButtonColor: string;
-    readonly actionMenuColor: string;
-    readonly actionWarnColor: string;
     readonly actionMenuTitle: string;
     readonly stickyView?: {
-        readonly headerTop?: {
+        readonly top?: {
             readonly desktopView: string;
             readonly mobileView: string;
         };
-        readonly paginationBottom?: {
+        readonly bottom?: {
             readonly desktopView: string;
             readonly mobileView: string;
         };

package/ngx-table-m3.css

@@ -0,0 +1,466 @@
+/* GLOBAL VALUES */
+:root {
+    --ngx-table-m3-toolbar-height: 32px;
+}
+
+/* DATA LOADER */
+.ngx-table-m3-loader {
+    display: flex;
+    justify-content: center;
+
+    padding: 5rem 0;
+}
+
+/* EMPTY DATA SET */
+.ngx-table-m3-empty {
+    direction: rtl;
+    padding: 3rem 0;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--error);
+}
+
+/* ENGLISH VALUES */
+.ngx-table-m3-en {
+    font-size: 13px;
+    direction: ltr;
+    font-family: Roboto, 'Helvetica Neue', sans-serif !important;
+}
+
+/* DEACTIVE DATA VIEW */
+.ngx-table-m3-deactive {
+    opacity: 0.6;
+    text-decoration: line-through;
+}
+
+/* FILTER VIEWS */
+.ngx-table-m3-filter {
+    display: block;
+    position: relative;
+
+    input {
+        padding: 0.75rem 0.5rem;
+        border-radius: 8px;
+        border-width: 0;
+        border-bottom: 1px solid var(--outline-variant);
+        outline: none;
+        width: 100%;
+
+        box-sizing: border-box;
+        color: var(--on-surface);
+        background-color: var(--surface-container-highest);
+    }
+
+    input::placeholder {
+        font-family: Yekan;
+        text-align: right;
+        direction: rtl;
+    }
+
+    .filter-search {
+        margin: 1rem 1rem 0 1rem;
+    }
+
+    .filter-items {
+        padding: 0.5rem;
+
+        mat-checkbox {
+            display: block;
+
+            .title {
+                cursor: pointer;
+            }
+        }
+
+        mat-radio-group {
+            display: flex;
+            flex-direction: column;
+
+            mat-radio-button {
+                .title {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .filter-item-search {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        input {
+            border-radius: 0;
+        }
+    }
+
+    .filter-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem;
+        column-gap: 0.5rem;
+
+        button.confirm {
+            flex: 1;
+        }
+    }
+}
+
+/* ROW ACTIONS */
+.ngx-table-m3-action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    button {
+        font-size: 90%;
+        color: var(--primary);
+    }
+
+    button.desktop-view {
+        border-radius: 0;
+        z-index: 0;
+    }
+
+    mat-icon {
+        color: var(--primary);
+    }
+
+    mat-icon.disabled {
+        color: unset;
+    }
+}
+
+/* PAGINATION */
+.ngx-table-m3-pagination {
+    display: block;
+    margin-top: 1rem;
+    z-index: 1;
+
+    .pagination-content {
+        display: flex;
+        align-items: center;
+
+        margin: 0 auto;
+        padding: 0.5rem 0;
+        background-color: var(--background);
+        border-radius: 8px;
+        border: 1px solid var(--surface-container-highest);
+
+        .counts {
+            display: block;
+            padding-right: 0.75rem;
+
+            .title {
+                font-weight: 500;
+                line-height: 1;
+            }
+
+            .total {
+                font-size: 80%;
+                opacity: 0.75;
+                line-height: 1;
+                margin-top: 0.25rem;
+            }
+        }
+    }
+
+    .pagination-content.desktop-view {
+        column-gap: 0.5rem;
+        width: fit-content;
+
+        .counts {
+            min-width: 250px;
+        }
+    }
+
+    .pagination-content.mobile-view {
+        .counts {
+            flex: 1;
+        }
+    }
+
+    .pagination-content.has-shadow {
+        border: 1px solid var(--outline-variant);
+        box-shadow: 0 0 10px 0 var(--outline-variant);
+    }
+}
+
+/* DATA VALUES */
+.ngx-table-m3-value {
+    .value-container {
+        display: block;
+
+        .value {
+            display: inline-flex;
+            align-items: center;
+
+            mat-icon {
+                font-size: 100%;
+                padding: 0 0.5rem;
+            }
+        }
+
+        .sub-value {
+            font-size: 85%;
+            font-weight: normal;
+            opacity: 0.5;
+        }
+    }
+
+    .value-container.card-title {
+        font-weight: 500;
+    }
+
+    .value-container.card-sub-title {
+        font-size: 85%;
+    }
+}
+
+/* TABLE  VIEW */
+.ngx-table-m3 .ngx-table-m3-table-view {
+    table {
+        thead {
+            z-index: 1;
+            background-color: var(--surface-container-highest);
+
+            th {
+                padding: 1.25rem 1rem;
+
+                .column {
+                    display: flex;
+                    align-items: center;
+                    column-gap: 0.5rem;
+
+                    mat-icon {
+                        font-size: 100%;
+                    }
+                }
+            }
+
+            th.active-filters {
+                padding: 0;
+                text-align: right;
+                border-bottom: 1px solid var(--outline-variant);
+
+                .toolbar {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    row-gap: 0.5rem;
+                    column-gap: 0.5rem;
+
+                    overflow: hidden;
+                    padding: 0.75rem;
+
+                    .item {
+                        display: flex;
+                        align-items: center;
+
+                        font-size: 85%;
+                        border-radius: 16px;
+                        border: 1px solid var(--outline);
+                        white-space: nowrap;
+
+                        .title {
+                            cursor: pointer;
+                            padding: 0 0.75rem 0 0.5rem;
+                        }
+
+                        .value {
+                            cursor: pointer;
+                            padding-left: 0.5rem;
+                            font-weight: normal;
+                            max-width: 150px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+
+                        .icon {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            cursor: pointer;
+                            padding: 0.25rem 0.5rem;
+
+                            mat-icon {
+                                font-size: 100%;
+                            }
+                        }
+                    }
+
+                    .clear {
+                        color: var(--secondary);
+                        border-color: var(--secondary);
+                    }
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                td {
+                    padding: 0.75rem 1rem;
+                    vertical-align: top;
+                    border-top: 1px solid var(--outline-variant);
+                }
+
+                td.icon {
+                    padding-left: 0;
+                }
+
+                td.action {
+                    padding: 0.25rem 0 0 0;
+                }
+
+                td.description {
+                    padding-top: 0;
+                    font-size: 85%;
+                    line-height: 1.5;
+                    text-align: justify;
+                }
+            }
+
+            tr.odd-row {
+                background-color: var(--surface-container);
+
+                td {
+                    border-top-width: 0;
+                }
+            }
+
+            tr.even-row {
+                background-color: var(--background);
+
+                td {
+                    border-top-width: 0;
+                }
+            }
+        }
+    }
+}
+
+/* CARD VIEW */
+.ngx-table-m3 .ngx-table-m3-card-view {
+    .card-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 1rem;
+
+        .card {
+            border-bottom: 1px solid var(--outline-variant);
+
+            .card-header {
+                display: flex;
+                align-items: flex-start;
+                column-gap: 0.75rem;
+                z-index: 1;
+
+                padding: 0.25rem 0.75rem 0.25rem 0;
+                border: 1px solid var(--outline-variant);
+                background-color: var(--surface-container-highest);
+                border-bottom-width: 0;
+
+                .icon {
+                    padding: 0.5rem 0;
+                }
+
+                .title {
+                    flex: 1;
+                    padding: 0.5rem 0;
+                }
+            }
+
+            .card-content {
+                display: block;
+                padding: 1rem 0 0.5rem 0;
+                border: 1px solid var(--outline-variant);
+                border-top-width: 0;
+                border-bottom-width: 0;
+                background-color: var(--surface-container-low);
+
+                .item {
+                    display: flex;
+                    align-items: flex-start;
+                    column-gap: 1rem;
+
+                    padding: 0 1rem 0.5rem 1rem;
+
+                    .title {
+                        width: 25%;
+                        font-size: 85%;
+                        font-weight: 500;
+                    }
+
+                    .value {
+                        flex: 1;
+                    }
+                }
+
+                .description {
+                    text-align: justify;
+                    font-size: 85%;
+                    line-height: 1.5;
+                    margin-top: 0.5rem;
+                    padding: 0.75rem 1rem 0 1rem;
+                    border-top: 1px solid var(--outline-variant);
+                }
+            }
+        }
+    }
+}
+
+.ngx-table-m3 .ngx-table-m3-card-view-toolbar {
+    .toolbar-container {
+        z-index: 2;
+        height: calc(var(--ngx-table-m3-toolbar-height) + 2px);
+        background-color: var(--background);
+        overflow-x: hidden;
+
+        .toolbar-items {
+            display: inline-flex;
+            align-items: center;
+            column-gap: 0.5rem;
+
+            position: relative;
+            left: 0;
+
+            .item {
+                display: flex;
+                align-items: center;
+                column-gap: 0.25rem;
+
+                padding: 0 0.5rem;
+                border-radius: 8px;
+                border: 1px solid var(--outline);
+                height: var(--ngx-table-m3-toolbar-height);
+
+                mat-icon {
+                    font-size: 100%;
+                }
+
+                span {
+                    font-size: 80%;
+                    white-space: nowrap;
+                }
+            }
+
+            .active {
+                color: var(--secondary);
+            }
+
+            .clear {
+                color: var(--secondary);
+                border-color: var(--secondary);
+            }
+        }
+    }
+
+    .toolbar-seperator {
+        z-index: 2;
+        height: 1rem;
+        background-color: var(--background);
+    }
+}