@dmlibs/dm-cmps 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmlibs/dm-cmps",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0"

package/types/dmlibs-dm-cmps.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, OnDestroy, Renderer2, Type, TemplateRef } from '@angular/core';
+import { Signal, InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, OnDestroy, Renderer2, Type, TemplateRef, PipeTransform } from '@angular/core';
 import { MatSelectChange } from '@angular/material/select';
 import { FormControl } from '@angular/forms';
 import { MatOptionSelectionChange } from '@angular/material/core';
@@ -1350,15 +1350,15 @@ declare class DmIcon {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmIcon, "dm-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type DmCmpsDateTypes = any | Date | string | {
+type DmDateTypes = any | Date | string | {
     _seconds: number;
     _nanoseconds: number;
 } | {
     seconds: number;
     nanoseconds: number;
 } | number | null;
-type DmCmpsDateFormats = 'dd/MM/yyyy' | 'yyyy/MM/dd' | 'dd/MM/yyyy HH:mm';
-type DmCmpsLangs = 'en' | 'he' | 'ar';
+type DmDateFormats = 'dd/MM/yyyy' | 'yyyy/MM/dd' | 'dd/MM/yyyy HH:mm';
+type DmLangs = 'en' | 'he' | 'ar';
 declare global {
     interface Date {
         getWeekOfYear(): number;
@@ -1367,7 +1367,7 @@ declare global {
     }
 }
 declare class DmDateService {
-    getDate(date: DmCmpsDateTypes): Date | null;
+    getDate(date: DmDateTypes): Date | null;
     /**
      *
      * @param date the date to transform
@@ -1393,7 +1393,7 @@ declare class DmDateService {
      * - 'DM_mw' - the week of the month
      * - 'DM_yd' - the day of the year
      */
-    getDateString(date: DmCmpsDateTypes, format?: DmCmpsDateFormats | string, lang?: DmCmpsLangs): string;
+    getDateString(date: DmDateTypes, format?: DmDateFormats | string, lang?: DmLangs): string;
     /**
      *
      * @param date the date to transform
@@ -1419,16 +1419,190 @@ declare class DmDateService {
      * - 'DM_mw' - the week of the month
      * - 'DM_yd' - the day of the year
      */
-    static getDateString(date: DmCmpsDateTypes, format?: DmCmpsDateFormats | string, lang?: DmCmpsLangs): string;
-    static getDate(date: DmCmpsDateTypes): Date | null;
-    static getTimeString(date: DmCmpsDateTypes): string;
+    static getDateString(date: DmDateTypes, format?: DmDateFormats | string, lang?: DmLangs): string;
+    static getDate(date: DmDateTypes): Date | null;
+    static getTimeString(date: DmDateTypes): string;
     static now(): Date;
     now(): Date;
-    getAge(date: DmCmpsDateTypes, fixed?: number | null, result?: 'string' | 'number'): number | string;
-    static getAge(date: DmCmpsDateTypes, fixed?: number | null, result?: 'string' | 'number'): number | string;
+    getAge(date: DmDateTypes, fixed?: number | null, result?: 'string' | 'number'): number | string;
+    static getAge(date: DmDateTypes, fixed?: number | null, result?: 'string' | 'number'): number | string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmDateService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DmDateService>;
 }
 
-export { DmCmpsDataSource, DmColorPicker, DmDateService, DmIcon, DmMatSelect, DmSpinner, DmSpinnerService, DmTable };
+declare class DmDatePipe implements PipeTransform {
+    /**
+     * Transforms a date to a string
+     * @param value - the date to transform
+     * @param format - the format of the date
+     * @param lang - the language of the date
+     * @returns the date as a string
+     * @example
+     * {{ date | dmDate: 'dd/MM/yyyy' }}
+     * {{ date | dmDate: 'dd/MM/yyyy HH:mm' }}
+     * {{ date | dmDate: 'yyyy/MM/dd' }}
+     * {{ date | dmDate: 'dd/MM/yyyy': 'en' }}
+     * {{ date | dmDate: 'dd/MM/yyyy': 'he' }}
+     * {{ date | dmDate: 'dd/MM/yyyy': 'ar' }}
+     * {{ date | dmDate: 'dd/MM/yyyy HH:mm': 'en' }}
+     * {{ date | dmDate: 'dd/MM/yyyy HH:mm': 'he' }}
+     * {{ date | dmDate: 'dd/MM/yyyy HH:mm': 'ar' }}
+     * {{ date | dmDate: 'yyyy/MM/dd': 'en' }}
+     * {{ date | dmDate: 'yyyy/MM/dd': 'he' }}
+     *
+     * The format can be any string that contains the following:
+     * - 'dd' - the day of the month
+     * - 'MM' - the month
+     * - 'yyyy' - the year
+     * - 'yy' - the year (2 digits)
+     * - 'HH' - the hour
+     * - 'mm' - the minute
+     * - 'ss' - the second
+     * - 'SSS' - the millisecond
+     * - 'DM_a' - the AM/PM
+     * - 'DM_E' - the day of the week
+     * - 'DM_Z' - the time zone
+     * - 'DM_z' - the time zone offset
+     * - 'DM_yw' - the week of the year
+     * - 'DM_mw' - the week of the month
+     * - 'DM_yd' - the day of the year
+     */
+    transform(value: DmDateTypes, format?: DmDateFormats | string, lang?: DmLangs): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmDatePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<DmDatePipe, "dmDate", true>;
+}
+
+declare class DmRunOncePipeSevice {
+    private cache;
+    private argsMap;
+    generateFunctionKey(func: (...args: any[]) => any, ...args: any[]): string;
+    getOrCache(key: string, fn: () => any, args: any[]): any;
+    private clearCache;
+    /**
+     *
+     * @param func - the function that called with the pipe `runOnce`
+     *
+     * @result when you need to trigger the function again, just call `triggerFunction` with the function
+     *
+     * @usageExample
+     *
+     * #### html
+     * ```html
+     * <!-- example without properties -->
+     * <div [innerText]="myFucntion.bind(this) | runOnce"></div>
+     *
+     * <!-- example with properties -->
+     * <div [innerText]="myFucntion.bind(this) | runOnce : '1122'"></div>
+     * ```
+     *
+     * you can define properties as you need
+     *
+     * #### typescript
+     * ```typescript
+     * export class YourComponent {
+     *    constructor(private runOncePipeService: DmCmpsRunOncePipeService) {}
+     *
+     *    myFucntion(prop?: any) {
+     *      let result: any;
+     *      // any logic here
+     *      return result;
+     *    }
+     *
+     *    //this will trigger the function every time its called
+     *    triggerFunction() {
+     *      this.runOncePipeService.triggerFunction(this.myFucntion)
+     *    }
+     * }
+     * ```
+     */
+    triggerFunction(func: (...args: any[]) => any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmRunOncePipeSevice, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DmRunOncePipeSevice>;
+}
+
+declare class DmFilterByPipe implements PipeTransform {
+    /**
+     *
+     * @param array - (any[]) source array
+     * @param filterPredicate - can get a function or object:
+     *
+     * @usageNotes
+     * #### Example as function
+     *
+     * ```typescript
+     * filterPredicateFunction(item: any) {
+     *    return item.age > 18 && item.weight > 80;
+     * }
+     * ```
+     *
+     * #### Example as object
+     *
+     * ```typescript
+     * filterPredicateObject: { [key: string]: any } = {
+     *   age: 18,
+     *   weight: 80
+     * }
+     * ```
+     *
+     * @usageExample
+     * #### Use function predicate
+     * ```html
+     * <div *ngFor="let item of source | filterBy: filterPredicateFunction.bind(this)">
+     * <!-- any html content here -->
+     * </div>
+     * ```
+     *
+     * #### Use object - with check all
+     * ```html
+     * <div *ngFor="let item of source | filterBy: filterPredicateObject">
+     * <!-- any html content here -->
+     * </div>
+     * ```
+     *
+     * #### Use object - returns the items that have some properties from the object
+     * ```html
+     * <div *ngFor="let item of source | filterBy: filterPredicateObject : false">
+     * <!-- any html content here -->
+     * </div>
+     * ```
+     *
+     * @param checkAll - when `filterPredicate` is an object,
+     *  if `checkAll=true` it will return just the elements that have the `filterPredicate` keys and values,
+     *  if `checkAll=false` it will return all the elements thet have some properties from the `filterPredicate` with same values,
+     *  | default is `checkAll=true`
+     *
+     *
+     * @returns (any[]) filterd array
+     */
+    transform(array: any[], filterPredicate: ((item: any) => boolean) | {
+        [key: string]: any;
+    }, checkAll?: boolean, ...args: any[]): any[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmFilterByPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<DmFilterByPipe, "filterBy", true>;
+}
+
+declare class DmRunOncePipe implements PipeTransform {
+    private runOncePipeService;
+    constructor(runOncePipeService: DmRunOncePipeSevice);
+    /**
+     * @explain - Runs the specified function only once, simplifying function calls in HTML.
+     * - This prevents redundant computations by caching results.
+     * @param func - The function to be executed only once.
+     * @param args - The arguments to be passed to the `func` function.
+     * @result The result of executing the `func` function, or the cached result if already executed.
+     * ### Example of Usage
+     * ```html
+     * <!-- function without arguments -->
+     * <div [innerText]="myFunction.bind(this) | runOnce"></div>
+     *
+     * <!-- function with arguments -->
+     * <div [innerText]="myFunction.bind(this) | runOnce : '' : myVariable : false"></div>
+     * ```
+     */
+    transform(func: (...args: any[]) => any, ...args: any[]): any;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmRunOncePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<DmRunOncePipe, "runOnce", true>;
+}
+
+export { DmCmpsDataSource, DmColorPicker, DmDatePipe, DmDateService, DmFilterByPipe, DmIcon, DmMatSelect, DmRunOncePipe, DmRunOncePipeSevice, DmSpinner, DmSpinnerService, DmTable };
 export type { DmCmpsDataSourceSort, DmTableActionButton, DmTableClasses, DmTableColumn, DmTableColumnHeaderMenuItem, DmTablePaginatorSettings, DmTableRowActionButton, DmTableStyle };