@dmlibs/dm-cmps 0.1.11 → 0.1.13

package/fesm2022/dmlibs-dm-cmps.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, input, booleanAttribute, model, computed, output, effect, Component, Injectable, numberAttribute, Input, Directive, HostListener } from '@angular/core';
+import { signal, input, booleanAttribute, model, computed, output, effect, Component, Injectable, numberAttribute, Input, Directive, HostListener, Pipe } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { Subject, Subscription, switchMap, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i2 from '@angular/material/form-field';
@@ -424,6 +424,7 @@ class DmMatSelect {
     internalControl = new FormControl(null);
     control = computed(() => this.formControl() ?? this.internalControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
     selectionChange = output();
+    onSelectionChange = output();
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     isBootstrapIcon = computed(() => {
         return this.icon() ? this.icon().includes('bi-') : false;
@@ -549,6 +550,13 @@ class DmMatSelect {
             ? option[this.optionValueKey()]
             : option;
     }
+    emitSelectionChange(event, optionRef) {
+        this.onSelectionChange.emit({
+            selected: event.source.selected,
+            optionRef: optionRef,
+            value: optionRef ? this.getOptionValue(optionRef) : null,
+        });
+    }
     onSelectionChangeHandler(event, option) {
         if (!event.isUserInput)
             return;
@@ -566,10 +574,12 @@ class DmMatSelect {
                 newValue = arr.filter((v) => v !== this.getOptionValue(option));
             }
             this.control().setValue(newValue);
+            this.emitSelectionChange(event, option);
         }
         else {
             if (!option) {
                 this.control().setValue(this.emptyOptionValue());
+                this.emitSelectionChange(event, null);
                 return;
             }
             if (selected) {
@@ -578,6 +588,7 @@ class DmMatSelect {
             else {
                 this.control().setValue(null);
             }
+            this.emitSelectionChange(event, option);
         }
         if (this.clearSearchAfterSelect()) {
             this.resetSearch();
@@ -623,7 +634,7 @@ class DmMatSelect {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmMatSelect, isStandalone: true, selector: "dm-mat-select", inputs: { formFieldClass: { classPropertyName: "formFieldClass", publicName: "formFieldClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionValueKey: { classPropertyName: "optionValueKey", publicName: "optionValueKey", isSignal: true, isRequired: false, transformFunction: null }, optionLabelKey: { classPropertyName: "optionLabelKey", publicName: "optionLabelKey", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionValue: { classPropertyName: "emptyOptionValue", publicName: "emptyOptionValue", isSignal: true, isRequired: false, transformFunction: null }, optionNameFormat: { classPropertyName: "optionNameFormat", publicName: "optionNameFormat", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, searchSectionBackgroundColor: { classPropertyName: "searchSectionBackgroundColor", publicName: "searchSectionBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, sortBySelectedOnTop: { classPropertyName: "sortBySelectedOnTop", publicName: "sortBySelectedOnTop", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, noDataLabel: { classPropertyName: "noDataLabel", publicName: "noDataLabel", isSignal: true, isRequired: false, transformFunction: null }, clearSearchAfterSelect: { classPropertyName: "clearSearchAfterSelect", publicName: "clearSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchButtonTooltip: { classPropertyName: "clearSearchButtonTooltip", publicName: "clearSearchButtonTooltip", isSignal: true, isRequired: false, transformFunction: null }, focusSearchInputOnPanelOpen: { classPropertyName: "focusSearchInputOnPanelOpen", publicName: "focusSearchInputOnPanelOpen", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, propertiesToSkipInSearch: { classPropertyName: "propertiesToSkipInSearch", publicName: "propertiesToSkipInSearch", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", filterText: "filterTextChange" }, ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\" style=\"width: 100%\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [multiple]=\"multiple()\"\n      [formControl]=\"control()\"\n      (selectionChange)=\"selectionChangeHandler($event)\"\n      [disabled]=\"disabled()\"\n      [panelWidth]=\"panelWidth()\"\n      [panelClass]=\"panelClass()\"\n      (opened)=\"onPanelOpened()\"\n    >\n      <div\n        class=\"search-section\"\n        [ngStyle]=\"{\n          'background-color': 'none'\n        }\"\n      >\n        @if (searchable()) {\n        <mat-form-field>\n          <input\n            id=\"dm-mat-select-search-input\"\n            matInput\n            [placeholder]=\"searchPlaceholder()\"\n            [(ngModel)]=\"filterText\"\n            (keyup)=\"applyFilter($event)\"\n            (keyDown.Space)=\"$event.stopPropagation()\"\n          />\n          @if (filterText()) {\n          <button\n            mat-icon-button\n            matSuffix\n            (click)=\"resetSearch()\"\n            [matTooltip]=\"clearSearchButtonTooltip() || ''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        } @if (selectAllEnabled() && multiple()) {\n        <mat-checkbox [checked]=\"checkIfAllSelected()\" (change)=\"selectAllChange($event)\">{{\n          selectAllLabel()\n        }}</mat-checkbox>\n        }\n      </div>\n      @if (emptyOption()) {\n      <mat-option\n        [value]=\"emptyOptionValue()\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, emptyOptionValue())\"\n        >{{ emptyOptionLabel() }}</mat-option\n      >\n      } @for (option of datasource().result(); track simpleArray() ? option :\n      option[this.optionValueKey()]) {\n      <mat-option\n        [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n        >{{\n          optionNameFormat()\n            ? option.__dmMatSelectFormattedName\n            : simpleArray()\n            ? option\n            : option[optionLabelKey()]\n        }}</mat-option\n      >\n      } @if (datasource().result().length === 0) {\n      <mat-option disabled>{{ noDataLabel() }}</mat-option>\n      }\n    </mat-select>\n\n    @if (icon(); as icon) {\n    <span matSuffix>\n      @if (isBootstrapIcon()) {\n      <span [innerHTML]=\"icon\"></span> } @else {\n      <mat-icon matSuffix>{{ icon }}</mat-icon>\n      }\n    </span>\n    }\n\n    <span matSuffix>\n      <ng-content select=\"[dm-mat-select-suffix]\"></ng-content>\n    </span>\n\n    <mat-error>{{ error() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [".dm-mat-select-wrapper{width:100%;position:relative}.dm-mat-select-wrapper .search-section{display:flex;flex-direction:column;position:sticky;top:0;z-index:1;background-color:var(--dm-mat-select-search-section-bg-color, #faf9fd)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.dm-mat-select-wrapper ::ng-deep mat-form-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{padding:0 4px 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmMatSelect, isStandalone: true, selector: "dm-mat-select", inputs: { formFieldClass: { classPropertyName: "formFieldClass", publicName: "formFieldClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionValueKey: { classPropertyName: "optionValueKey", publicName: "optionValueKey", isSignal: true, isRequired: false, transformFunction: null }, optionLabelKey: { classPropertyName: "optionLabelKey", publicName: "optionLabelKey", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionValue: { classPropertyName: "emptyOptionValue", publicName: "emptyOptionValue", isSignal: true, isRequired: false, transformFunction: null }, optionNameFormat: { classPropertyName: "optionNameFormat", publicName: "optionNameFormat", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, searchSectionBackgroundColor: { classPropertyName: "searchSectionBackgroundColor", publicName: "searchSectionBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, sortBySelectedOnTop: { classPropertyName: "sortBySelectedOnTop", publicName: "sortBySelectedOnTop", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, noDataLabel: { classPropertyName: "noDataLabel", publicName: "noDataLabel", isSignal: true, isRequired: false, transformFunction: null }, clearSearchAfterSelect: { classPropertyName: "clearSearchAfterSelect", publicName: "clearSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchButtonTooltip: { classPropertyName: "clearSearchButtonTooltip", publicName: "clearSearchButtonTooltip", isSignal: true, isRequired: false, transformFunction: null }, focusSearchInputOnPanelOpen: { classPropertyName: "focusSearchInputOnPanelOpen", publicName: "focusSearchInputOnPanelOpen", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, propertiesToSkipInSearch: { classPropertyName: "propertiesToSkipInSearch", publicName: "propertiesToSkipInSearch", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", filterText: "filterTextChange" }, ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\" style=\"width: 100%\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [multiple]=\"multiple()\"\n      [formControl]=\"control()\"\n      (selectionChange)=\"selectionChangeHandler($event)\"\n      [disabled]=\"disabled()\"\n      [panelWidth]=\"panelWidth()\"\n      [panelClass]=\"panelClass()\"\n      (opened)=\"onPanelOpened()\"\n    >\n      <div\n        class=\"search-section\"\n        [ngStyle]=\"{\n          'background-color': 'none'\n        }\"\n      >\n        @if (searchable()) {\n        <mat-form-field>\n          <input\n            id=\"dm-mat-select-search-input\"\n            matInput\n            [placeholder]=\"searchPlaceholder()\"\n            [(ngModel)]=\"filterText\"\n            (keyup)=\"applyFilter($event)\"\n            (keyDown.Space)=\"$event.stopPropagation()\"\n          />\n          @if (filterText()) {\n          <button\n            mat-icon-button\n            matSuffix\n            (click)=\"resetSearch()\"\n            [matTooltip]=\"clearSearchButtonTooltip() || ''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        } @if (selectAllEnabled() && multiple()) {\n        <mat-checkbox [checked]=\"checkIfAllSelected()\" (change)=\"selectAllChange($event)\">{{\n          selectAllLabel()\n        }}</mat-checkbox>\n        }\n      </div>\n      @if (emptyOption()) {\n      <mat-option\n        [value]=\"emptyOptionValue()\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, emptyOptionValue())\"\n        >{{ emptyOptionLabel() }}</mat-option\n      >\n      } @for (option of datasource().result(); track simpleArray() ? option :\n      option[this.optionValueKey()]) {\n      <mat-option\n        [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n        >{{\n          optionNameFormat()\n            ? option.__dmMatSelectFormattedName\n            : simpleArray()\n            ? option\n            : option[optionLabelKey()]\n        }}</mat-option\n      >\n      } @if (datasource().result().length === 0) {\n      <mat-option disabled>{{ noDataLabel() }}</mat-option>\n      }\n    </mat-select>\n\n    @if (icon(); as icon) {\n    <span matSuffix>\n      @if (isBootstrapIcon()) {\n      <span [innerHTML]=\"icon\"></span> } @else {\n      <mat-icon matSuffix>{{ icon }}</mat-icon>\n      }\n    </span>\n    }\n\n    <span matSuffix>\n      <ng-content select=\"[dm-mat-select-suffix]\"></ng-content>\n    </span>\n\n    <mat-error>{{ error() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [".dm-mat-select-wrapper{width:100%;position:relative}.dm-mat-select-wrapper .search-section{display:flex;flex-direction:column;position:sticky;top:0;z-index:1;background-color:var(--dm-mat-select-search-section-bg-color, #faf9fd)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.dm-mat-select-wrapper ::ng-deep mat-form-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{padding:0 4px 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, decorators: [{
             type: Component,
@@ -639,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatTooltip,
                         MatIcon,
                     ], template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\" style=\"width: 100%\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [multiple]=\"multiple()\"\n      [formControl]=\"control()\"\n      (selectionChange)=\"selectionChangeHandler($event)\"\n      [disabled]=\"disabled()\"\n      [panelWidth]=\"panelWidth()\"\n      [panelClass]=\"panelClass()\"\n      (opened)=\"onPanelOpened()\"\n    >\n      <div\n        class=\"search-section\"\n        [ngStyle]=\"{\n          'background-color': 'none'\n        }\"\n      >\n        @if (searchable()) {\n        <mat-form-field>\n          <input\n            id=\"dm-mat-select-search-input\"\n            matInput\n            [placeholder]=\"searchPlaceholder()\"\n            [(ngModel)]=\"filterText\"\n            (keyup)=\"applyFilter($event)\"\n            (keyDown.Space)=\"$event.stopPropagation()\"\n          />\n          @if (filterText()) {\n          <button\n            mat-icon-button\n            matSuffix\n            (click)=\"resetSearch()\"\n            [matTooltip]=\"clearSearchButtonTooltip() || ''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        } @if (selectAllEnabled() && multiple()) {\n        <mat-checkbox [checked]=\"checkIfAllSelected()\" (change)=\"selectAllChange($event)\">{{\n          selectAllLabel()\n        }}</mat-checkbox>\n        }\n      </div>\n      @if (emptyOption()) {\n      <mat-option\n        [value]=\"emptyOptionValue()\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, emptyOptionValue())\"\n        >{{ emptyOptionLabel() }}</mat-option\n      >\n      } @for (option of datasource().result(); track simpleArray() ? option :\n      option[this.optionValueKey()]) {\n      <mat-option\n        [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n        >{{\n          optionNameFormat()\n            ? option.__dmMatSelectFormattedName\n            : simpleArray()\n            ? option\n            : option[optionLabelKey()]\n        }}</mat-option\n      >\n      } @if (datasource().result().length === 0) {\n      <mat-option disabled>{{ noDataLabel() }}</mat-option>\n      }\n    </mat-select>\n\n    @if (icon(); as icon) {\n    <span matSuffix>\n      @if (isBootstrapIcon()) {\n      <span [innerHTML]=\"icon\"></span> } @else {\n      <mat-icon matSuffix>{{ icon }}</mat-icon>\n      }\n    </span>\n    }\n\n    <span matSuffix>\n      <ng-content select=\"[dm-mat-select-suffix]\"></ng-content>\n    </span>\n\n    <mat-error>{{ error() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [".dm-mat-select-wrapper{width:100%;position:relative}.dm-mat-select-wrapper .search-section{display:flex;flex-direction:column;position:sticky;top:0;z-index:1;background-color:var(--dm-mat-select-search-section-bg-color, #faf9fd)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.dm-mat-select-wrapper ::ng-deep mat-form-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{padding:0 4px 0 8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formFieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFieldClass", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllEnabled", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionValueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueKey", required: false }] }], optionLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabelKey", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], emptyOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionLabel", required: false }] }], emptyOptionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionValue", required: false }] }], optionNameFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionNameFormat", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], searchSectionBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSectionBackgroundColor", required: false }] }], sortBySelectedOnTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortBySelectedOnTop", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], noDataLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataLabel", required: false }] }], clearSearchAfterSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchAfterSelect", required: false }] }], clearSearchButtonTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchButtonTooltip", required: false }] }], focusSearchInputOnPanelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusSearchInputOnPanelOpen", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], propertiesToSkipInSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToSkipInSearch", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { formFieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFieldClass", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllEnabled", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionValueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueKey", required: false }] }], optionLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabelKey", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], emptyOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionLabel", required: false }] }], emptyOptionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionValue", required: false }] }], optionNameFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionNameFormat", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], searchSectionBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSectionBackgroundColor", required: false }] }], sortBySelectedOnTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortBySelectedOnTop", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], noDataLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataLabel", required: false }] }], clearSearchAfterSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchAfterSelect", required: false }] }], clearSearchButtonTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchButtonTooltip", required: false }] }], focusSearchInputOnPanelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusSearchInputOnPanelOpen", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], propertiesToSkipInSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToSkipInSearch", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
 
 class DmColorPicker {
     colors = input([
@@ -2212,9 +2223,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 args: ['window:keyup.shift', ['$event']]
             }], tableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearSearchTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchTooltip", required: false }] }], searchInputAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputAppearance", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], enableSperatedSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSperatedSearch", required: false }] }], actionButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtons", required: false }] }], enablePrint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrint", required: false }] }], printButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "printButton", required: false }] }], enablePagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePagination", required: false }] }], autoPaginationAboveRowsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPaginationAboveRowsCount", required: false }] }], paginatorSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorSettings", required: false }] }], enableLoadingProgressbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLoadingProgressbar", required: false }] }], enableColumnsDragAndDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsDragAndDrop", required: false }] }], enableColumnsDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsDragHandle", required: false }] }], enableTotalRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTotalRow", required: false }] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], tableClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClasses", required: false }] }], rowStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStyleFn", required: false }] }], editColumnsVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "editColumnsVisibility", required: false }] }], editColumnsVisibilityButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "editColumnsVisibilityButton", required: false }] }], editColumnsVisibilitySelectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "editColumnsVisibilitySelectAllLabel", required: false }] }], rowIdentifierField: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdentifierField", required: false }] }] } });
 
+class DmDatePipe {
+    /**
+     * 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, format = 'dd/MM/yyyy', lang = 'he') {
+        if (!value)
+            return '';
+        return DmDateService.getDateString(value, format, lang);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: DmDatePipe, isStandalone: true, name: "dmDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dmDate',
+                }]
+        }] });
+
+class DmRunOncePipeSevice {
+    cache = new Map();
+    argsMap = new Map();
+    generateFunctionKey(func, ...args) {
+        let functionName = func.name;
+        if (functionName.includes('bound')) {
+            functionName = functionName.replace('bound ', '');
+        }
+        const argsString = args
+            .map((arg) => {
+            if (typeof arg === 'object') {
+                return JSON.stringify(arg);
+            }
+            else if (typeof arg === 'function') {
+                return arg.name;
+            }
+            else {
+                return arg;
+            }
+        })
+            .join(':');
+        if (argsString) {
+            functionName = `${functionName}:${argsString}`;
+        }
+        return `${functionName}`;
+    }
+    getOrCache(key, fn, args) {
+        if (this.cache.has(key) && this.argsMap.has(key)) {
+            const cachedArgs = this.argsMap.get(key);
+            if (JSON.stringify(cachedArgs) == JSON.stringify(args)) {
+                return this.cache.get(key);
+            }
+        }
+        const result = fn();
+        this.cache.set(key, result);
+        this.argsMap.set(key, args);
+        return result;
+    }
+    clearCache(key) {
+        if (key) {
+            this.cache.delete(key);
+        }
+        else {
+            this.cache.clear();
+        }
+    }
+    /**
+     *
+     * @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) {
+        const key = this.generateFunctionKey(func);
+        this.clearCache(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipeSevice, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipeSevice, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipeSevice, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DmFilterByPipe {
+    /**
+     *
+     * @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, filterPredicate, checkAll = true, ...args) {
+        if (!Array.isArray(array)) {
+            return array;
+        }
+        if (typeof filterPredicate === 'function') {
+            return array.filter(filterPredicate);
+        }
+        if (typeof filterPredicate === 'object') {
+            return array.filter((item) => {
+                if (checkAll) {
+                    return Object.keys(filterPredicate).every((key) => {
+                        return item[key] === filterPredicate[key];
+                    });
+                }
+                else {
+                    return Object.keys(filterPredicate).some((key) => {
+                        return item[key] === filterPredicate[key];
+                    });
+                }
+            });
+        }
+        return array;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmFilterByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: DmFilterByPipe, isStandalone: true, name: "filterBy", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmFilterByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterBy',
+                    pure: false,
+                }]
+        }] });
+
+class DmRunOncePipe {
+    runOncePipeService;
+    constructor(runOncePipeService) {
+        this.runOncePipeService = runOncePipeService;
+    }
+    /**
+     * @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) {
+        const key = this.runOncePipeService.generateFunctionKey(func, ...args);
+        return this.runOncePipeService.getOrCache(key, () => func(...args), [...args]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipe, deps: [{ token: DmRunOncePipeSevice }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipe, isStandalone: true, name: "runOnce", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmRunOncePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'runOnce',
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: DmRunOncePipeSevice }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DmCmpsDataSource, DmColorPicker, DmDateService, DmIcon, DmMatSelect, DmSpinner, DmSpinnerService, DmTable };
+export { DmCmpsDataSource, DmColorPicker, DmDatePipe, DmDateService, DmFilterByPipe, DmIcon, DmMatSelect, DmRunOncePipe, DmRunOncePipeSevice, DmSpinner, DmSpinnerService, DmTable };
 //# sourceMappingURL=dmlibs-dm-cmps.mjs.map