@dmlibs/dm-cmps 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmlibs/dm-cmps",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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';
@@ -573,6 +573,11 @@ type DmMatSelectOutput<T> = T | T[] | string | string[] | number | number[] | nu
 type DmMatSelectOption<T> = T & {
     __dmMatSelectFormattedName: string;
 };
+interface DmSelectOnSelectionChange<T> {
+    selected: boolean;
+    optionRef: T | null;
+    value: DmMatSelectOutput<T>;
+}
 declare class DmMatSelect<T = any> implements DmMatSelectConfig<T>, OnDestroy {
     formFieldClass: _angular_core.InputSignal<string>;
     wrapperClass: _angular_core.InputSignal<string>;
@@ -606,6 +611,7 @@ declare class DmMatSelect<T = any> implements DmMatSelectConfig<T>, OnDestroy {
     private internalControl;
     protected control: _angular_core.Signal<FormControl<DmMatSelectOutput<T>>>;
     selectionChange: _angular_core.OutputEmitterRef<MatSelectChange<DmMatSelectOutput<T>>>;
+    onSelectionChange: _angular_core.OutputEmitterRef<DmSelectOnSelectionChange<T>>;
     icon: _angular_core.InputSignal<string | null>;
     protected isBootstrapIcon: _angular_core.Signal<boolean>;
     noDataLabel: _angular_core.InputSignal<string>;
@@ -626,12 +632,13 @@ declare class DmMatSelect<T = any> implements DmMatSelectConfig<T>, OnDestroy {
     protected applyFilter(event: KeyboardEvent): void;
     protected selectionChangeHandler(event: MatSelectChange<T | T[] | null>): void;
     private getOptionValue;
+    private emitSelectionChange;
     protected onSelectionChangeHandler(event: MatOptionSelectionChange, option: T | null): void;
     protected selectAllChange(event: MatCheckboxChange): void;
     protected resetSearch(): void;
     protected onPanelOpened(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmMatSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmMatSelect<any>, "dm-mat-select", never, { "formFieldClass": { "alias": "formFieldClass"; "required": false; "isSignal": true; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAllEnabled": { "alias": "selectAllEnabled"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionValueKey": { "alias": "optionValueKey"; "required": false; "isSignal": true; }; "optionLabelKey": { "alias": "optionLabelKey"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyOption": { "alias": "emptyOption"; "required": false; "isSignal": true; }; "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; "isSignal": true; }; "emptyOptionValue": { "alias": "emptyOptionValue"; "required": false; "isSignal": true; }; "optionNameFormat": { "alias": "optionNameFormat"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "searchSectionBackgroundColor": { "alias": "searchSectionBackgroundColor"; "required": false; "isSignal": true; }; "sortBySelectedOnTop": { "alias": "sortBySelectedOnTop"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; "isSignal": true; }; "clearSearchAfterSelect": { "alias": "clearSearchAfterSelect"; "required": false; "isSignal": true; }; "clearSearchButtonTooltip": { "alias": "clearSearchButtonTooltip"; "required": false; "isSignal": true; }; "focusSearchInputOnPanelOpen": { "alias": "focusSearchInputOnPanelOpen"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "propertiesToSkipInSearch": { "alias": "propertiesToSkipInSearch"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; "filterText": "filterTextChange"; }, never, ["[dm-mat-select-suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmMatSelect<any>, "dm-mat-select", never, { "formFieldClass": { "alias": "formFieldClass"; "required": false; "isSignal": true; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAllEnabled": { "alias": "selectAllEnabled"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionValueKey": { "alias": "optionValueKey"; "required": false; "isSignal": true; }; "optionLabelKey": { "alias": "optionLabelKey"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyOption": { "alias": "emptyOption"; "required": false; "isSignal": true; }; "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; "isSignal": true; }; "emptyOptionValue": { "alias": "emptyOptionValue"; "required": false; "isSignal": true; }; "optionNameFormat": { "alias": "optionNameFormat"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "searchSectionBackgroundColor": { "alias": "searchSectionBackgroundColor"; "required": false; "isSignal": true; }; "sortBySelectedOnTop": { "alias": "sortBySelectedOnTop"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; "isSignal": true; }; "clearSearchAfterSelect": { "alias": "clearSearchAfterSelect"; "required": false; "isSignal": true; }; "clearSearchButtonTooltip": { "alias": "clearSearchButtonTooltip"; "required": false; "isSignal": true; }; "focusSearchInputOnPanelOpen": { "alias": "focusSearchInputOnPanelOpen"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "propertiesToSkipInSearch": { "alias": "propertiesToSkipInSearch"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; "onSelectionChange": "onSelectionChange"; "filterText": "filterTextChange"; }, never, ["[dm-mat-select-suffix]"], true, never>;
 }
 
 interface DmCmpsColor {
@@ -1350,15 +1357,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 +1374,7 @@ declare global {
     }
 }
 declare class DmDateService {
-    getDate(date: DmCmpsDateTypes): Date | null;
+    getDate(date: DmDateTypes): Date | null;
     /**
      *
      * @param date the date to transform
@@ -1393,7 +1400,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 +1426,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 };