@webilix/ngx-table-m3 0.0.8 → 0.0.10

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

@@ -18,6 +18,10 @@ export declare class FilterComponent implements OnInit {
             readonly methods: import("./filter.interface").FilterMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
+        NUMBER: {
+            readonly methods: import("./filter.interface").FilterMethods<any, any>;
+            readonly component: import("@angular/cdk/portal").ComponentType<any>;
+        };
         SEARCH: {
             readonly methods: import("./filter.interface").FilterMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;

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

@@ -1,7 +1,7 @@
 import { InjectionToken } from '@angular/core';
 import { IViewConfig } from '../views';
-import { IFilterDate, IFilterMultiSelect, IFilterSearch, IFilterSelect } from '.';
-export type Filter = IFilterDate | IFilterMultiSelect | IFilterSearch | IFilterSelect;
+import { IFilterDate, IFilterMultiSelect, IFilterNumber, IFilterSearch, IFilterSelect } from '.';
+export type Filter = IFilterDate | IFilterMultiSelect | IFilterNumber | IFilterSearch | IFilterSelect;
 export interface IFilter {
     readonly filter: Filter;
     readonly title: string;

package/lib/filters/index.d.ts

@@ -2,6 +2,8 @@ export * from './date/filter-date.component';
 export * from './date/filter-date.interface';
 export * from './multi-select/filter-multi-select.component';
 export * from './multi-select/filter-multi-select.interface';
+export * from './number/filter-number.component';
+export * from './number/filter-number.interface';
 export * from './search/filter-search.component';
 export * from './search/filter-search.interface';
 export * from './select/filter-select.component';

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

@@ -0,0 +1,34 @@
+import { AfterViewInit } from '@angular/core';
+import { IViewConfig } from '../../views';
+import { IFilterNumber, IFilterNumberValue } from './filter-number.interface';
+import * as i0 from "@angular/core";
+type Mode = IFilterNumberValue['mode'];
+export declare class FilterNumberComponent implements AfterViewInit {
+    private className;
+    private fromInput?;
+    private numberInput?;
+    data: {
+        filter: IFilterNumber;
+        viewConfig: IViewConfig;
+    };
+    value?: IFilterNumberValue;
+    onChange: (value?: IFilterNumberValue) => void;
+    modes: {
+        type: Mode;
+        title: string;
+    }[];
+    mode?: Mode;
+    query?: string;
+    fromQuery?: string;
+    toQuery?: string;
+    numberQuery?: string;
+    inputTransformFn: (value: any) => string;
+    ngAfterViewInit(): void;
+    setMode(mode: Mode): void;
+    isNumeric(value: string): boolean;
+    setQuery(fromQuery: string, toQuery: string): void;
+    updateQuery(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterNumberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterNumberComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+export {};

package/lib/filters/number/filter-number.interface.d.ts

@@ -0,0 +1,21 @@
+import { FilterMethods } from '../filter.interface';
+type Mode = 'EQUAL' | 'GREATER' | 'LOWER' | 'BETWEEN';
+export interface IFilterNumberValue {
+    readonly query: string;
+    readonly mode: Mode;
+}
+export interface IFilterNumber {
+    readonly type: 'NUMBER';
+    readonly mode?: Mode;
+    readonly toParam?: (value: IFilterNumberValue) => string;
+}
+export declare class FilterNumberMethods<T> extends FilterMethods<IFilterNumber, IFilterNumberValue> {
+    toParam(value: IFilterNumberValue): string;
+    value(value: string, filter: IFilterNumber): IFilterNumberValue | undefined;
+    query(value: IFilterNumberValue): string;
+    active(value: IFilterNumberValue, filter: IFilterNumber): {
+        value: string;
+        english: boolean;
+    };
+}
+export {};

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

@@ -2,6 +2,7 @@ import { AfterViewInit } from '@angular/core';
 import { IViewConfig } from '../../views';
 import { IFilterSearch, IFilterSearchValue } from './filter-search.interface';
 import * as i0 from "@angular/core";
+type Mode = IFilterSearchValue['mode'];
 export declare class FilterSearchComponent implements AfterViewInit {
     private className;
     private searchInput?;
@@ -12,10 +13,11 @@ export declare class FilterSearchComponent implements AfterViewInit {
     value?: IFilterSearchValue;
     onChange: (value?: IFilterSearchValue) => void;
     query?: string;
-    mode?: 'PHRASE' | 'ALL' | 'EACH';
+    mode: Mode;
     ngAfterViewInit(): void;
     updateQuery(query: string): void;
-    updateMode(mode: 'PHRASE' | 'ALL' | 'EACH'): void;
+    updateMode(mode: Mode): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterSearchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterSearchComponent, "ng-component", never, {}, {}, never, never, true, never>;
 }
+export {};

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

@@ -1,11 +1,12 @@
 import { FilterMethods } from '../filter.interface';
+type Mode = 'PHRASE' | 'ALL' | 'EACH';
 export interface IFilterSearchValue {
     readonly query: string;
-    readonly mode: 'PHRASE' | 'ALL' | 'EACH';
+    readonly mode: Mode;
 }
 export interface IFilterSearch {
     readonly type: 'SEARCH';
-    readonly mode?: 'PHRASE' | 'ALL' | 'EACH';
+    readonly mode?: Mode;
     readonly english?: boolean;
     readonly toParam?: (value: IFilterSearchValue) => string;
 }
@@ -18,3 +19,4 @@ export declare class FilterSearchMethods<T> extends FilterMethods<IFilterSearch,
         english: boolean;
     };
 }
+export {};

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

@@ -19,19 +19,19 @@ export declare class ViewValueComponent<T> implements OnChanges {
             readonly methods: import("../../columns").ColumnMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
-        DURATION: {
+        NUMBER: {
             readonly methods: import("../../columns").ColumnMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
-        "FILE-SIZE": {
+        DURATION: {
             readonly methods: import("../../columns").ColumnMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
-        MOBILE: {
+        "FILE-SIZE": {
             readonly methods: import("../../columns").ColumnMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
-        NUMBER: {
+        MOBILE: {
             readonly methods: import("../../columns").ColumnMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };

package/ngx-table-m3.css

@@ -58,6 +58,42 @@
         direction: rtl;
     }
 
+    .filter-number {
+        padding-top: 1rem;
+
+        .modes {
+            display: flex;
+            align-items: center;
+            column-gap: 1rem;
+            padding: 0 1rem 1rem 1rem;
+
+            .mode {
+                flex-grow: 1;
+
+                cursor: pointer;
+                font-size: 90%;
+                padding: 0.5rem 0;
+                text-align: center;
+                border-radius: 8px;
+                border: 1px solid var(--outline-variant);
+            }
+
+            .mode.selected {
+                color: var(--secondary);
+                border-color: var(--secondary);
+            }
+        }
+
+        .inputs {
+            display: flex;
+            align-items: center;
+            column-gap: 1rem;
+
+            padding: 0 1rem 1rem 1rem;
+            box-sizing: border-box;
+        }
+    }
+
     .filter-search {
         margin: 1rem 1rem 0 1rem;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilix/ngx-table-m3",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "Ali Amirnezhad",
   "description": "Responsive table view component for Angular and Material 3",
   "repository": {
@@ -26,8 +26,9 @@
     "@angular/material": ">=19.0.4",
     "@webilix/helper-library": ">=6.0.2",
     "@webilix/jalali-date-time": ">=2.0.5",
-    "@webilix/ngx-calendar-m3": ">=0.0.9",
-    "@webilix/ngx-helper-m3": ">=0.0.16"
+    "@webilix/ngx-calendar-m3": ">=0.0.10",
+    "@webilix/ngx-helper-m3": ">=0.0.20",
+    "ngx-mask": ">=19.0.6"
   },
   "dependencies": {
     "tslib": "^2.3.0"