@webilix/ngx-helper-m3 0.0.12 → 0.0.14

package/fesm2022/webilix-ngx-helper-m3.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, createComponent } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, HostListener, createComponent } from '@angular/core';
 import { NgComponentOutlet, NgClass } from '@angular/common';
 import * as i1$2 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
@@ -18,9 +18,9 @@ import * as i2$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$3 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
+import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$4 from '@angular/common/http';
 import { HttpHeaders, HttpEventType } from '@angular/common/http';
-import { trigger, transition, style, animate } from '@angular/animations';
 
 const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
 const provideNgxHelperConfig = (config) => {
@@ -53,10 +53,10 @@ class NgxHelperBoxComponent {
             providers: [{ provide: NGX_HELPER_BOX_DATA, useValue: this.data }],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: NgxHelperBoxComponent, isStandalone: true, selector: "ngx-helper-box", inputs: { component: "component", data: "data", padding: "padding", hideShadow: "hideShadow" }, host: { properties: { "className": "this.className", "style.padding": "this.paddingCSS" } }, usesOnChanges: true, ngImport: i0, template: "@if (component) {\n<span *ngComponentOutlet=\"component; injector: injector\"></span>\n} @else {\n<ng-content></ng-content>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperBoxComponent, isStandalone: true, selector: "ngx-helper-box", inputs: { component: "component", data: "data", padding: "padding", hideShadow: "hideShadow" }, host: { properties: { "className": "this.className", "style.padding": "this.paddingCSS" } }, usesOnChanges: true, ngImport: i0, template: "@if (component) {\n<span *ngComponentOutlet=\"component; injector: injector\"></span>\n} @else {\n<ng-content></ng-content>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-box', imports: [NgComponentOutlet], template: "@if (component) {\n<span *ngComponentOutlet=\"component; injector: injector\"></span>\n} @else {\n<ng-content></ng-content>\n}\n" }]
         }], propDecorators: { className: [{
@@ -90,10 +90,10 @@ class NgxHelperBankCardPipe {
                 return Helper.STRING.getBankCardView(value, options?.join || '-');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBankCardPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBankCardPipe, isStandalone: true, name: "ngxHelperBankCard" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperBankCardPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperBankCardPipe, isStandalone: true, name: "ngxHelperBankCard" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBankCardPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperBankCardPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperBankCard' }]
         }] });
@@ -125,10 +125,10 @@ class NgxHelperDatePipe {
                 return jalali.toFullText(date, { format: options?.format, timezone });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDatePipe, isStandalone: true, name: "ngxHelperDate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDatePipe, isStandalone: true, name: "ngxHelperDate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperDate' }]
         }] });
@@ -175,10 +175,10 @@ class NgxHelperDurationPipe {
                 return Helper.NUMBER.format(days * 24 * 3600 + hours * 3600 + minutes * 60 + seconds, !!options?.english ? 'EN' : 'FA');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDurationPipe, isStandalone: true, name: "ngxHelperDuration" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDurationPipe, isStandalone: true, name: "ngxHelperDuration" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperDurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperDuration' }]
         }] });
@@ -189,10 +189,10 @@ class NgxHelperFileSizePipe {
             return '';
         return Helper.NUMBER.toFileSize(value, !!options?.english ? 'EN' : 'FA');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperFileSizePipe, isStandalone: true, name: "ngxHelperFileSize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperFileSizePipe, isStandalone: true, name: "ngxHelperFileSize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperFileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperFileSizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperFileSize' }]
         }] });
@@ -203,10 +203,10 @@ class NgxHelperMobilePipe {
             return '';
         return Helper.STRING.getMobileView(value, options?.join || '-');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMobilePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMobilePipe, isStandalone: true, name: "ngxHelperMobile" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMobilePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMobilePipe, isStandalone: true, name: "ngxHelperMobile" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMobilePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMobilePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperMobile' }]
         }] });
@@ -218,10 +218,10 @@ class NgxHelperNumberPipe {
         value = options?.fractionDigits ? +value.toFixed(options?.fractionDigits) : value;
         return Helper.NUMBER.format(value, options?.english ? 'EN' : 'FA');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperNumberPipe, isStandalone: true, name: "ngxHelperNumber" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperNumberPipe, isStandalone: true, name: "ngxHelperNumber" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperNumber' }]
         }] });
@@ -234,10 +234,10 @@ class NgxHelperPeriodPipe {
         const to = Helper.IS.date(value) ? new Date() : 'to' in value ? value.to : new Date();
         return Helper.DATE.jalaliPeriod(from, to, options?.timezone || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPeriodPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPeriodPipe, isStandalone: true, name: "ngxHelperPeriod" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPeriodPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPeriodPipe, isStandalone: true, name: "ngxHelperPeriod" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPeriodPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPeriodPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperPeriod' }]
         }] });
@@ -265,10 +265,10 @@ class NgxHelperPricePipe {
         value /= 1000;
         return getPrice(['B', 'د'], ['Billion', 'میلیارد']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPricePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPricePipe, isStandalone: true, name: "ngxHelperPrice" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPricePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPricePipe, isStandalone: true, name: "ngxHelperPrice" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPricePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPricePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperPrice' }]
         }] });
@@ -292,10 +292,10 @@ class NgxHelperVolumePipe {
         value /= 1000;
         return getVolume(['L', 'ل'], ['Liter', 'لیتر']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperVolumePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperVolumePipe, isStandalone: true, name: "ngxHelperVolume" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperVolumePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperVolumePipe, isStandalone: true, name: "ngxHelperVolume" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperVolumePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperVolumePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperVolume' }]
         }] });
@@ -325,10 +325,10 @@ class NgxHelperWeightPipe {
         value /= 1000;
         return getWeight(['KT', 'ه'], ['Kilotonne', 'هزار تن']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperWeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperWeightPipe, isStandalone: true, name: "ngxHelperWeight" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperWeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperWeightPipe, isStandalone: true, name: "ngxHelperWeight" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperWeightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperWeightPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperWeight' }]
         }] });
@@ -363,10 +363,10 @@ class NgxHelperValuePipe {
                 return new NgxHelperWeightPipe().transform(value.value, value) || emptyText;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValuePipe, isStandalone: true, name: "ngxHelperValue" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValuePipe, isStandalone: true, name: "ngxHelperValue" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValuePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperValue' }]
         }] });
@@ -398,7 +398,7 @@ class ComponentService {
             return value === undefined
                 ? { title: item.title, value: '' }
                 : typeof value === 'string'
-                    ? { title: item.title, value: value.trim() }
+                    ? { title: item.title, value: value.trim(), color: item.color }
                     : {
                         title: item.title,
                         value: pipeTransform(value),
@@ -410,10 +410,10 @@ class ComponentService {
                     };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ComponentService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ComponentService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ComponentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ComponentService, decorators: [{
             type: Injectable
         }] });
 
@@ -448,10 +448,10 @@ class NgxHelperCardComponent {
     onResize() {
         this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperCardComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCardComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-card', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule], providers: [ComponentService], template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
@@ -488,20 +488,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 class NgxHelperLoaderComponent {
     loaderSize;
     loaderColor;
-    mode;
+    mode = 'SPINNER';
     size;
     color;
     padding;
+    margin;
+    ngOnInit() {
+        this.init();
+    }
     ngOnChanges(changes) {
+        this.init();
+    }
+    init() {
         this.loaderSize = `${this.size || 25}px`;
         this.loaderColor = this.color || `var(--secondary)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxHelperLoaderComponent, isStandalone: true, selector: "ngx-helper-loader", inputs: { mode: "mode", size: "size", color: "color", padding: "padding" }, host: { properties: { "style.--loader-size": "this.loaderSize", "style.--loader-color": "this.loaderColor" } }, usesOnChanges: true, ngImport: i0, template: "<div [style.padding]=\"padding || '0'\">\n    <div [class]=\"mode.toLowerCase()\"></div>\n</div>\n", styles: [".spinner{--size: calc(var(--loader-size) / 7);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,var(--loader-color) 94%,rgba(0,0,0,0)) top/var(--size) var(--size) no-repeat,conic-gradient(rgba(0,0,0,0) 30%,var(--loader-color));mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size)),#000 0);animation:spinner 1s infinite linear}@keyframes spinner{to{transform:rotate(1turn)}}.dots-spinner{--dot: no-repeat radial-gradient(farthest-side, var(--loader-color) 92%, #0000);--size: calc(var(--loader-size) / 4);width:var(--loader-size);aspect-ratio:1;background:var(--dot) top,var(--dot) left,var(--dot) right,var(--dot) bottom;background-size:var(--size) var(--size);animation:dots-spinner 1s infinite}@keyframes dots-spinner{to{transform:rotate(.5turn)}}.wheel-spinner{--size: calc(var(--loader-size) / 9);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:var(--loader-color);mask:repeating-conic-gradient(rgba(0,0,0,0) 0deg,#000 1deg 70deg,rgba(0,0,0,0) 71deg 90deg),radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size) - 1px),#000 calc(100% - var(--size)));-webkit-mask-composite:destination-in;mask-composite:intersect;animation:wheel-spinner 1s infinite}@keyframes wheel-spinner{to{transform:rotate(.5turn)}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperLoaderComponent, isStandalone: true, selector: "ngx-helper-loader", inputs: { mode: "mode", size: "size", color: "color", padding: "padding", margin: "margin" }, host: { properties: { "style.--loader-size": "this.loaderSize", "style.--loader-color": "this.loaderColor" } }, usesOnChanges: true, ngImport: i0, template: "<div [style.padding]=\"padding || '0'\">\n    <div [class]=\"mode.toLowerCase()\" [style.margin]=\"margin || '0px'\"></div>\n</div>\n", styles: [".spinner{--size: calc(var(--loader-size) / 7);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,var(--loader-color) 94%,rgba(0,0,0,0)) top/var(--size) var(--size) no-repeat,conic-gradient(rgba(0,0,0,0) 30%,var(--loader-color));mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size)),#000 0);animation:spinner 1s infinite linear}@keyframes spinner{to{transform:rotate(1turn)}}.dots-spinner{--dot: no-repeat radial-gradient(farthest-side, var(--loader-color) 92%, #0000);--size: calc(var(--loader-size) / 4);width:var(--loader-size);aspect-ratio:1;background:var(--dot) top,var(--dot) left,var(--dot) right,var(--dot) bottom;background-size:var(--size) var(--size);animation:dots-spinner 1s infinite}@keyframes dots-spinner{to{transform:rotate(.5turn)}}.wheel-spinner{--size: calc(var(--loader-size) / 9);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:var(--loader-color);mask:repeating-conic-gradient(rgba(0,0,0,0) 0deg,#000 1deg 70deg,rgba(0,0,0,0) 71deg 90deg),radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size) - 1px),#000 calc(100% - var(--size)));-webkit-mask-composite:destination-in;mask-composite:intersect;animation:wheel-spinner 1s infinite}@keyframes wheel-spinner{to{transform:rotate(.5turn)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-helper-loader', imports: [], template: "<div [style.padding]=\"padding || '0'\">\n    <div [class]=\"mode.toLowerCase()\"></div>\n</div>\n", styles: [".spinner{--size: calc(var(--loader-size) / 7);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,var(--loader-color) 94%,rgba(0,0,0,0)) top/var(--size) var(--size) no-repeat,conic-gradient(rgba(0,0,0,0) 30%,var(--loader-color));mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size)),#000 0);animation:spinner 1s infinite linear}@keyframes spinner{to{transform:rotate(1turn)}}.dots-spinner{--dot: no-repeat radial-gradient(farthest-side, var(--loader-color) 92%, #0000);--size: calc(var(--loader-size) / 4);width:var(--loader-size);aspect-ratio:1;background:var(--dot) top,var(--dot) left,var(--dot) right,var(--dot) bottom;background-size:var(--size) var(--size);animation:dots-spinner 1s infinite}@keyframes dots-spinner{to{transform:rotate(.5turn)}}.wheel-spinner{--size: calc(var(--loader-size) / 9);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:var(--loader-color);mask:repeating-conic-gradient(rgba(0,0,0,0) 0deg,#000 1deg 70deg,rgba(0,0,0,0) 71deg 90deg),radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size) - 1px),#000 calc(100% - var(--size)));-webkit-mask-composite:destination-in;mask-composite:intersect;animation:wheel-spinner 1s infinite}@keyframes wheel-spinner{to{transform:rotate(.5turn)}}\n"] }]
+            args: [{ selector: 'ngx-helper-loader', imports: [], template: "<div [style.padding]=\"padding || '0'\">\n    <div [class]=\"mode.toLowerCase()\" [style.margin]=\"margin || '0px'\"></div>\n</div>\n", styles: [".spinner{--size: calc(var(--loader-size) / 7);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,var(--loader-color) 94%,rgba(0,0,0,0)) top/var(--size) var(--size) no-repeat,conic-gradient(rgba(0,0,0,0) 30%,var(--loader-color));mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size)),#000 0);animation:spinner 1s infinite linear}@keyframes spinner{to{transform:rotate(1turn)}}.dots-spinner{--dot: no-repeat radial-gradient(farthest-side, var(--loader-color) 92%, #0000);--size: calc(var(--loader-size) / 4);width:var(--loader-size);aspect-ratio:1;background:var(--dot) top,var(--dot) left,var(--dot) right,var(--dot) bottom;background-size:var(--size) var(--size);animation:dots-spinner 1s infinite}@keyframes dots-spinner{to{transform:rotate(.5turn)}}.wheel-spinner{--size: calc(var(--loader-size) / 9);width:var(--loader-size);aspect-ratio:1;border-radius:50%;background:var(--loader-color);mask:repeating-conic-gradient(rgba(0,0,0,0) 0deg,#000 1deg 70deg,rgba(0,0,0,0) 71deg 90deg),radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - var(--size) - 1px),#000 calc(100% - var(--size)));-webkit-mask-composite:destination-in;mask-composite:intersect;animation:wheel-spinner 1s infinite}@keyframes wheel-spinner{to{transform:rotate(.5turn)}}\n"] }]
         }], propDecorators: { loaderSize: [{
                 type: HostBinding,
                 args: ['style.--loader-size']
@@ -510,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 args: ['style.--loader-color']
             }], mode: [{
                 type: Input,
-                args: [{ required: true }]
+                args: [{ required: false }]
             }], size: [{
                 type: Input,
                 args: [{ required: false }]
@@ -520,6 +527,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }], padding: [{
                 type: Input,
                 args: [{ required: false }]
+            }], margin: [{
+                type: Input,
+                args: [{ required: false }]
             }] } });
 
 const NGX_HELPER_PAGE_GROUP_ITEM = new InjectionToken('NGX-HELPER-PAGE-GROUP-ITEM');
@@ -618,10 +628,10 @@ class NgxHelperPageGroupComponent {
         };
         this.pageChanged.next(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPageGroupComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageId: "pageId", data: "data" }, outputs: { pageChanged: "pageChanged", dataChanged: "dataChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n    class=\"page-group-aside\"\n    [style.width]=\"sidebarWidth\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n    </div>\n    }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<div\n    class=\"page-group-nav\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        @if (pageId === item) {\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        }\n    </div>\n    }\n</div>\n\n<div\n    class=\"page-group-spacer\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' +\n        (componentConfig.stickyView?.top?.mobileView || undefined) +\n        ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <div\n        class=\"header\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            (isMobile\n                ? 'calc(' +\n                  (componentConfig.stickyView?.top?.mobileView || undefined) +\n                  ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n                : componentConfig.stickyView?.top?.desktopView) || undefined\n        \"\n    >\n        <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n        <div class=\"spacer\"></div>\n    </div>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPageGroupComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageId: "pageId", data: "data" }, outputs: { pageChanged: "pageChanged", dataChanged: "dataChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n    class=\"page-group-aside\"\n    [style.width]=\"sidebarWidth\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n    </div>\n    }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<div\n    class=\"page-group-nav\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        @if (pageId === item) {\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        }\n    </div>\n    }\n</div>\n\n<div\n    class=\"page-group-spacer\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' +\n        (componentConfig.stickyView?.top?.mobileView || undefined) +\n        ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <div\n        class=\"header\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            (isMobile\n                ? 'calc(' +\n                  (componentConfig.stickyView?.top?.mobileView || undefined) +\n                  ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n                : componentConfig.stickyView?.top?.desktopView) || undefined\n        \"\n    >\n        <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n        <div class=\"spacer\"></div>\n    </div>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n    class=\"page-group-aside\"\n    [style.width]=\"sidebarWidth\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n    </div>\n    }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<div\n    class=\"page-group-nav\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        @if (pageId === item) {\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        }\n    </div>\n    }\n</div>\n\n<div\n    class=\"page-group-spacer\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' +\n        (componentConfig.stickyView?.top?.mobileView || undefined) +\n        ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <div\n        class=\"header\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            (isMobile\n                ? 'calc(' +\n                  (componentConfig.stickyView?.top?.mobileView || undefined) +\n                  ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n                : componentConfig.stickyView?.top?.desktopView) || undefined\n        \"\n    >\n        <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n        <div class=\"spacer\"></div>\n    </div>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
@@ -650,6 +660,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Output
             }] } });
 
+class NgxHelperProgressComponent {
+    className = 'ngx-helper-m3-progress';
+    borderRadiusCSS;
+    backgroundColorCSS;
+    value;
+    align = 'LR';
+    borderRadius = '0px';
+    progressColor = 'var(--surface-container)';
+    backgroundColor;
+    size;
+    direction;
+    ngOnChanges(changes) {
+        this.className = `ngx-helper-m3-progress ${this.align}`;
+        this.borderRadiusCSS = this.borderRadius;
+        this.backgroundColorCSS = this.backgroundColor || 'transparent';
+        let value = typeof this.value === 'number' ? this.value : (this.value.done / this.value.total) * 100;
+        if (isNaN(value) || value < 0)
+            value = 0;
+        else if (value > 100)
+            value = 100;
+        this.size = `${value.toFixed(2)}%`;
+        this.direction = this.align === 'LR' || this.align === 'RL' ? 'H' : 'V';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperProgressComponent, isStandalone: true, selector: "ngx-helper-progress", inputs: { value: "value", align: "align", borderRadius: "borderRadius", progressColor: "progressColor", backgroundColor: "backgroundColor" }, host: { properties: { "className": "this.className", "style.border-radius": "this.borderRadiusCSS", "style.background-color": "this.backgroundColorCSS" } }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"progress\"\n    [style.border-radius]=\"borderRadius\"\n    [style.background-color]=\"progressColor\"\n    [style.width]=\"direction === 'H' ? size : '100%'\"\n    [style.height]=\"direction === 'V' ? size : '100%'\"\n></div>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-helper-progress', imports: [], template: "<div\n    class=\"progress\"\n    [style.border-radius]=\"borderRadius\"\n    [style.background-color]=\"progressColor\"\n    [style.width]=\"direction === 'H' ? size : '100%'\"\n    [style.height]=\"direction === 'V' ? size : '100%'\"\n></div>\n<div class=\"content\"><ng-content></ng-content></div>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }], borderRadiusCSS: [{
+                type: HostBinding,
+                args: ['style.border-radius']
+            }], backgroundColorCSS: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], value: [{
+                type: Input,
+                args: [{ required: true }]
+            }], align: [{
+                type: Input,
+                args: [{ required: false }]
+            }], borderRadius: [{
+                type: Input,
+                args: [{ required: false }]
+            }], progressColor: [{
+                type: Input,
+                args: [{ required: false }]
+            }], backgroundColor: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
 class NgxHelperSectionStickyDirective {
     elementRef;
     config;
@@ -693,10 +758,10 @@ class NgxHelperSectionStickyDirective {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionStickyDirective, deps: [{ token: i0.ElementRef }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: NgxHelperSectionStickyDirective, isStandalone: true, selector: "[ngxHelperSectionSticky]", inputs: { ngxHelperSectionSticky: "ngxHelperSectionSticky", ngxHelperSectionZIndex: "ngxHelperSectionZIndex" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionStickyDirective, deps: [{ token: i0.ElementRef }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionStickyDirective, isStandalone: true, selector: "[ngxHelperSectionSticky]", inputs: { ngxHelperSectionSticky: "ngxHelperSectionSticky", ngxHelperSectionZIndex: "ngxHelperSectionZIndex" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionStickyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionStickyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxHelperSectionSticky]',
@@ -734,10 +799,10 @@ class NgxHelperSectionComponent {
     onResize() {
         this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxHelperSectionComponent, isStandalone: true, selector: "ngx-helper-section", inputs: { gapSize: "gapSize" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.--section-gap": "this.gap" } }, providers: [ComponentService], ngImport: i0, template: "<div class=\"section-columns\" [class.section-columns-mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .section-columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)}:host .section-columns-mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .section-columns-mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionComponent, isStandalone: true, selector: "ngx-helper-section", inputs: { gapSize: "gapSize" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.--section-gap": "this.gap" } }, providers: [ComponentService], ngImport: i0, template: "<div class=\"section-columns\" [class.section-columns-mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .section-columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)}:host .section-columns-mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .section-columns-mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-section', host: { '(window:resize)': 'onResize($event)' }, imports: [], providers: [ComponentService], template: "<div class=\"section-columns\" [class.section-columns-mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .section-columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)}:host .section-columns-mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .section-columns-mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
@@ -763,10 +828,10 @@ class NgxHelperSectionColumnComponent {
         this.flexStyle = this.width ? 'unset' : this.flex?.toString() || '1';
         this.widthStyle = this.width || '*';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxHelperSectionColumnComponent, isStandalone: true, selector: "ngx-helper-section-column", inputs: { flex: "flex", width: "width", sticky: "sticky" }, host: { properties: { "style.flex": "this.flexStyle", "style.width": "this.widthStyle" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionColumnComponent, isStandalone: true, selector: "ngx-helper-section-column", inputs: { flex: "flex", width: "width", sticky: "sticky" }, host: { properties: { "style.flex": "this.flexStyle", "style.width": "this.widthStyle" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-section-column', imports: [], template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { flexStyle: [{
@@ -848,10 +913,10 @@ class NgxHelperValueBoxComponent {
             this.copyTimeout = undefined;
         }, 2000);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValueBoxComponent, deps: [{ token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: NgxHelperValueBoxComponent, isStandalone: true, selector: "ngx-helper-value-box", inputs: { values: "values", column: "column", clearBox: "clearBox", emptyText: "emptyText", gapSize: "gapSize", hideShadow: "hideShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.grid-template-columns": "this.gridTemplateColumns", "style.--gap-size": "this.boxGap" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@for (item of data; track $index) {\n<div class=\"value-box\" [class.clear]=\"clearBox\" [class.click]=\"!!item.action\">\n    <div class=\"title\" (click)=\"onClick(item.action)\">{{ item.title }}</div>\n    <div\n        class=\"value\"\n        [style.display]=\"'inline-block'\"\n        [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n        [style.color]=\"item.color\"\n        [class.en]=\"item.english\"\n        [class.empty]=\"!item.value\"\n        (click)=\"onClick(item.action)\"\n    >\n        {{ item.value || emptyText }}\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValueBoxComponent, deps: [{ token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperValueBoxComponent, isStandalone: true, selector: "ngx-helper-value-box", inputs: { values: "values", column: "column", clearBox: "clearBox", emptyText: "emptyText", gapSize: "gapSize", hideShadow: "hideShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.grid-template-columns": "this.gridTemplateColumns", "style.--gap-size": "this.boxGap" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@for (item of data; track $index) {\n<div class=\"value-box\" [class.clear]=\"clearBox\" [class.click]=\"!!item.action\">\n    <div class=\"title\" (click)=\"onClick(item.action)\">{{ item.title }}</div>\n    <div\n        class=\"value\"\n        [style.display]=\"'inline-block'\"\n        [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n        [style.color]=\"item.color\"\n        [class.en]=\"item.english\"\n        [class.empty]=\"!item.value\"\n        (click)=\"onClick(item.action)\"\n    >\n        {{ item.value || emptyText }}\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValueBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValueBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-value-box', host: { '(window:resize)': 'onResize($event)' }, imports: [ClipboardModule, MatIcon, MatIconButton], providers: [ComponentService], template: "@for (item of data; track $index) {\n<div class=\"value-box\" [class.clear]=\"clearBox\" [class.click]=\"!!item.action\">\n    <div class=\"title\" (click)=\"onClick(item.action)\">{{ item.title }}</div>\n    <div\n        class=\"value\"\n        [style.display]=\"'inline-block'\"\n        [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n        [style.color]=\"item.color\"\n        [class.en]=\"item.english\"\n        [class.empty]=\"!item.value\"\n        (click)=\"onClick(item.action)\"\n    >\n        {{ item.value || emptyText }}\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
@@ -922,10 +987,10 @@ class NgxHelperValueListComponent {
             this.copyTimeout = undefined;
         }, 2000);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValueListComponent, deps: [{ token: i1.Router }, { token: ComponentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: NgxHelperValueListComponent, isStandalone: true, selector: "ngx-helper-value-list", inputs: { values: "values", titleWidth: "titleWidth", emptyText: "emptyText" }, host: { properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@for (item of data; track $index) {\n<div class=\"value-list-item\" [class.even]=\"$index % 2 === 0\" [class.odd]=\"$index % 2 === 1\">\n    <div class=\"title\" [style.width]=\"titleWidth\">{{ item.title }}:</div>\n    <div class=\"value\">\n        <div\n            [style.display]=\"'inline-block'\"\n            [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n            [style.color]=\"item.color\"\n            [class.en]=\"item.english\"\n            [class.empty]=\"!item.value\"\n            [class.click]=\"!!item.action\"\n            (click)=\"onClick(item.action)\"\n        >\n            {{ item.value || emptyText }}\n        </div>\n        <!-- ACTION -->\n        @if (item.action) {\n        <button mat-icon-button type=\"button\" (click)=\"onClick(item.action)\">\n            <mat-icon [style.color]=\"item.color\">open_in_new</mat-icon>\n        </button>\n\n        }\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValueListComponent, deps: [{ token: i1.Router }, { token: ComponentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperValueListComponent, isStandalone: true, selector: "ngx-helper-value-list", inputs: { values: "values", titleWidth: "titleWidth", emptyText: "emptyText" }, host: { properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@for (item of data; track $index) {\n<div class=\"value-list-item\" [class.even]=\"$index % 2 === 0\" [class.odd]=\"$index % 2 === 1\">\n    <div class=\"title\" [style.width]=\"titleWidth\">{{ item.title }}:</div>\n    <div class=\"value\">\n        <div\n            [style.display]=\"'inline-block'\"\n            [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n            [style.color]=\"item.color\"\n            [class.en]=\"item.english\"\n            [class.empty]=\"!item.value\"\n            [class.click]=\"!!item.action\"\n            (click)=\"onClick(item.action)\"\n        >\n            {{ item.value || emptyText }}\n        </div>\n        <!-- ACTION -->\n        @if (item.action) {\n        <button mat-icon-button type=\"button\" (click)=\"onClick(item.action)\">\n            <mat-icon [style.color]=\"item.color\">open_in_new</mat-icon>\n        </button>\n\n        }\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValueListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperValueListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-helper-value-list', imports: [ClipboardModule, MatIcon, MatIconButton], providers: [ComponentService], template: "@for (item of data; track $index) {\n<div class=\"value-list-item\" [class.even]=\"$index % 2 === 0\" [class.odd]=\"$index % 2 === 1\">\n    <div class=\"title\" [style.width]=\"titleWidth\">{{ item.title }}:</div>\n    <div class=\"value\">\n        <div\n            [style.display]=\"'inline-block'\"\n            [style.direction]=\"item.ltr ? 'ltr' : '*'\"\n            [style.color]=\"item.color\"\n            [class.en]=\"item.english\"\n            [class.empty]=\"!item.value\"\n            [class.click]=\"!!item.action\"\n            (click)=\"onClick(item.action)\"\n        >\n            {{ item.value || emptyText }}\n        </div>\n        <!-- ACTION -->\n        @if (item.action) {\n        <button mat-icon-button type=\"button\" (click)=\"onClick(item.action)\">\n            <mat-icon [style.color]=\"item.color\">open_in_new</mat-icon>\n        </button>\n\n        }\n    </div>\n    <!-- COPY TO CLIPBOARD -->\n    @if (item.copyToClipboard && item.value) {\n    <button mat-icon-button type=\"button\" [cdkCopyToClipboard]=\"item.value\" (click)=\"onCopy($event, $index)\">\n        <mat-icon>{{ copyIndex === $index ? 'done_all' : 'copy' }}</mat-icon>\n    </button>\n    }\n</div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: ComponentService }], propDecorators: { className: [{
@@ -954,10 +1019,10 @@ class NgxHelperMultiLinePipe {
             ? this.domSanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
             : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMultiLinePipe, isStandalone: true, name: "ngxHelperMultiLine" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, isStandalone: true, name: "ngxHelperMultiLine" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperMultiLine' }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
@@ -983,10 +1048,10 @@ class NgxHelperSafePipe {
                 return this.domSanitizer.bypassSecurityTrustHtml(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSafePipe, isStandalone: true, name: "ngxHelperSafe" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, isStandalone: true, name: "ngxHelperSafe" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperSafe' }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
@@ -994,10 +1059,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 class ConfirmDialogComponent {
     className = 'ngx-helper-m3-confirm';
     confirm = inject(MAT_DIALOG_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'confirm-dialog' }, imports: [NgClass, MatButtonModule, MatDialogModule, MatIconModule], template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n" }]
         }], propDecorators: { className: [{
@@ -1015,10 +1080,10 @@ class ConfirmBottomSheetComponent {
     close(confirmed) {
         this.matBottomSheetRef.dismiss(confirmed);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
@@ -1115,10 +1180,10 @@ class NgxHelperConfirmService {
             denyClass: config?.denyClass,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
@@ -1150,10 +1215,10 @@ class ContainerDialogComponent {
     close() {
         this.matDialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ContainerDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerDialogComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'container-dialog' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$1.MatDialogRef }], propDecorators: { className: [{
@@ -1184,10 +1249,10 @@ class ContainerBottomSheetComponent {
     close() {
         this.matBottomSheetRef.dismiss();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
@@ -1268,18 +1333,319 @@ class NgxHelperContainerService {
         const config = arg1 || {};
         return new NgxHelperContainerCalss(this.matBottomSheet, this.matDialog, { component, title, config });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
 
-class UploadComponent {
+class ToastComponent {
+    elementRef;
+    onClick = () => this.close();
+    host = true;
+    className = 'ngx-helper-m3-toast';
+    top = '1rem';
+    textColor;
+    borderColor;
+    backgroundColor;
+    id;
+    icon;
+    messages = [];
+    config;
+    init;
+    close;
+    timeout;
+    showClose;
+    animation;
+    progress = 0;
+    start = 0;
+    interval;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        this.borderColor = this.backgroundColor;
+        const xPosition = this.config.helper?.toastXPosition || 'CENTER';
+        this.className = `ngx-helper-m3-toast ${xPosition.toLowerCase()}`;
+        const toastTimeout = this.config.helper?.toastTimeout === undefined || this.config.helper?.toastTimeout < 0
+            ? 4000
+            : this.config.helper?.toastTimeout;
+        this.timeout =
+            this.config.toast.timeout === undefined || this.config.toast.timeout < 0
+                ? toastTimeout
+                : this.config.toast.timeout;
+        this.showClose = this.config.toast.showClose || this.timeout === 0;
+        this.animation = this.config.helper?.toastProgressAnimation || 'DECREASE';
+        if (this.timeout) {
+            this.start = new Date().getTime();
+            this.interval = setInterval(() => {
+                const timer = new Date().getTime();
+                this.progress = ((timer - this.start) * 100) / this.timeout;
+                this.progress = this.progress < 100 ? +this.progress.toFixed(2) : 100;
+                if (this.progress === 100)
+                    this.close();
+            }, 25);
+        }
+    }
+    ngOnDestroy() {
+        if (this.interval)
+            clearInterval(this.interval);
+    }
+    ngAfterViewInit() {
+        this.init();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToastComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "toast" }, listeners: { "click": "onClick()" }, properties: { "@host": "this.host", "className": "this.className", "style.top": "this.top", "style.color": "this.textColor", "style.border-color": "this.borderColor", "style.background-color": "this.backgroundColor" } }, ngImport: i0, template: "<div class=\"content\">\n    <div class=\"toast\">\n        <mat-icon [style.color]=\"textColor\" class=\"icon\">{{ icon }}</mat-icon>\n        <ul>\n            @for (message of messages; track $index) {\n            <li [innerHTML]=\"message | ngxHelperMultiLine\"></li>\n            }\n        </ul>\n    </div>\n    <!-- CLOSE ICON -->\n    @if (showClose) {\n    <mat-icon [style.color]=\"textColor\" class=\"close\">close</mat-icon>\n    }\n</div>\n\n<div class=\"progress-container\" [style.background-color]=\"backgroundColor\">\n    @if (timeout !== 0) {\n    <div\n        class=\"progress-value\"\n        [style.background-color]=\"'color-mix(in srgb, ' + backgroundColor + ', black 25%)'\"\n        [style.width]=\"(animation === 'DECREASE' ? 100 - progress : progress) + '%'\"\n    ></div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }], animations: [
+            trigger('host', [
+                transition(':enter', [
+                    style({ top: 0, opacity: 0 }),
+                    animate('350ms ease-in-out', style({ top: '*', opacity: 1 })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'toast' }, imports: [MatIcon, NgxHelperMultiLinePipe], animations: [
+                        trigger('host', [
+                            transition(':enter', [
+                                style({ top: 0, opacity: 0 }),
+                                animate('350ms ease-in-out', style({ top: '*', opacity: 1 })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"content\">\n    <div class=\"toast\">\n        <mat-icon [style.color]=\"textColor\" class=\"icon\">{{ icon }}</mat-icon>\n        <ul>\n            @for (message of messages; track $index) {\n            <li [innerHTML]=\"message | ngxHelperMultiLine\"></li>\n            }\n        </ul>\n    </div>\n    <!-- CLOSE ICON -->\n    @if (showClose) {\n    <mat-icon [style.color]=\"textColor\" class=\"close\">close</mat-icon>\n    }\n</div>\n\n<div class=\"progress-container\" [style.background-color]=\"backgroundColor\">\n    @if (timeout !== 0) {\n    <div\n        class=\"progress-value\"\n        [style.background-color]=\"'color-mix(in srgb, ' + backgroundColor + ', black 25%)'\"\n        [style.width]=\"(animation === 'DECREASE' ? 100 - progress : progress) + '%'\"\n    ></div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], host: [{
+                type: HostBinding,
+                args: ['@host']
+            }], className: [{
+                type: HostBinding,
+                args: ['className']
+            }], top: [{
+                type: HostBinding,
+                args: ['style.top']
+            }], textColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }], borderColor: [{
+                type: HostBinding,
+                args: ['style.border-color']
+            }], backgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }] } });
+
+class NgxHelperToastService {
+    applicationRef;
+    injector;
+    config;
+    components = [];
+    constructor(applicationRef, injector, config) {
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+        this.config = config;
+    }
+    getId() {
+        let id = undefined;
+        while (!id || this.components.some((c) => c.id === id))
+            id = Helper.STRING.getRandom(10);
+        return id;
+    }
+    updatePositions() {
+        let top = 0;
+        this.components.forEach((c, index) => {
+            c.componentRef.instance.top = `calc(${(index / 1.5).toFixed(1)}rem + calc(${top}px + 1rem))`;
+            top += +c.componentRef.instance.elementRef.nativeElement.offsetHeight;
+        });
+    }
+    toast(toast, message, arg1, arg2) {
+        const config = arg2 ? arg1 : typeof arg1 === 'object' ? arg1 : {};
+        const onClose = arg2 || (typeof arg1 === 'function' ? arg1 : () => { });
+        const messages = typeof message === 'string' ? [message] : message;
+        const content = [toast.icon, toast.textColor, toast.backgroundColor, ...messages].join('\n');
+        const duplicate = this.components.find((component) => component.content === content);
+        if (!this.config?.toastAllowDuplicates && duplicate) {
+            if (this.config?.toastResetDuplicates) {
+                duplicate.componentRef.instance.start = new Date().getTime();
+                duplicate.componentRef.instance.progress = 0;
+            }
+            return;
+        }
+        const componentRef = createComponent(ToastComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        const id = this.getId();
+        componentRef.instance.id = id;
+        componentRef.instance.icon = toast.icon;
+        componentRef.instance.textColor = toast.textColor;
+        componentRef.instance.backgroundColor = toast.backgroundColor;
+        componentRef.instance.messages = messages;
+        componentRef.instance.config = { helper: this.config, toast: config };
+        componentRef.instance.init = () => this.updatePositions();
+        componentRef.instance.close = () => {
+            this.applicationRef.detachView(componentRef.hostView);
+            document.body.removeChild(htmlElement);
+            componentRef.destroy();
+            this.components = this.components.filter((c) => c.id !== componentRef.instance.id);
+            this.updatePositions();
+            if (onClose)
+                onClose();
+        };
+        const htmlElement = componentRef.hostView.rootNodes[0];
+        this.applicationRef.attachView(componentRef.hostView);
+        document.body.appendChild(htmlElement);
+        this.components.push({ id, componentRef, content });
+        this.updatePositions();
+    }
+    info(message, arg1, arg2) {
+        const toast = { icon: 'warning_amber', textColor: '#fff', backgroundColor: '#2f96b4' };
+        this.toast(toast, message, arg1, arg2);
+    }
+    success(message, arg1, arg2) {
+        const toast = { icon: 'done_all', textColor: '#fff', backgroundColor: '#51a351' };
+        this.toast(toast, message, arg1, arg2);
+    }
+    warning(message, arg1, arg2) {
+        const toast = { icon: 'info', textColor: '#fff', backgroundColor: '#f89406' };
+        this.toast(toast, message, arg1, arg2);
+    }
+    error(message, arg1, arg2) {
+        const toast = { icon: 'cancel', textColor: '#fff', backgroundColor: '#bd362f' };
+        this.toast(toast, message, arg1, arg2);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperToastService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }] });
+
+class DownloadComponent {
     httpClient;
+    ngxHelperToastService;
+    host = true;
     className = 'ngx-helper-m3-http';
+    bottom = '1rem';
+    id;
+    path;
+    title;
+    config;
+    onSuccess;
+    onError;
+    close;
+    progress = 0;
+    constructor(httpClient, ngxHelperToastService) {
+        this.httpClient = httpClient;
+        this.ngxHelperToastService = ngxHelperToastService;
+    }
+    ngAfterViewInit() {
+        setTimeout(this.download.bind(this), 0);
+    }
+    download() {
+        let headers = new HttpHeaders();
+        const header = this.config.header || {};
+        Object.keys(header).forEach((key) => (headers = headers.set(key, header[key])));
+        let request;
+        switch (this.config.method || 'GET') {
+            case 'GET':
+                request = this.httpClient.get(this.path, {
+                    headers,
+                    reportProgress: true,
+                    observe: 'events',
+                    responseType: 'arraybuffer',
+                });
+                break;
+            case 'POST':
+                request = this.httpClient.post(this.path, {
+                    headers,
+                    reportProgress: true,
+                    observe: 'events',
+                    responseType: 'arraybuffer',
+                });
+                break;
+            case 'PUT':
+                request = this.httpClient.put(this.path, {
+                    headers,
+                    reportProgress: true,
+                    observe: 'events',
+                    responseType: 'arraybuffer',
+                });
+                break;
+            case 'PATCH':
+                request = this.httpClient.patch(this.path, {
+                    headers,
+                    reportProgress: true,
+                    observe: 'events',
+                    responseType: 'arraybuffer',
+                });
+                break;
+        }
+        request.subscribe({
+            next: (event) => {
+                switch (event.type) {
+                    case HttpEventType.DownloadProgress:
+                        const progress = event.loaded && event.total ? Math.ceil((event.loaded / event.total) * 1000) / 10 : 0;
+                        this.progress = progress <= 100 ? progress : 100;
+                        break;
+                    case HttpEventType.Response:
+                        this.progress = 100;
+                        this.onSuccess(event.body);
+                        this.close();
+                        break;
+                }
+            },
+            error: () => {
+                this.onError();
+                this.close();
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DownloadComponent, deps: [{ token: i1$4.HttpClient }, { token: NgxHelperToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DownloadComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "download" }, properties: { "@host": "this.host", "className": "this.className", "style.bottom": "this.bottom" } }, ngImport: i0, template: "<div class=\"content\">\n    <mat-icon>file_download</mat-icon>\n    <div class=\"title\">{{ title }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
+            trigger('host', [
+                transition(':enter', [
+                    style({ left: 'calc(-250px - 1rem)' }),
+                    animate('100ms ease-in-out', style({ left: '1rem' })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DownloadComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'download' }, imports: [MatIcon], animations: [
+                        trigger('host', [
+                            transition(':enter', [
+                                style({ left: 'calc(-250px - 1rem)' }),
+                                animate('100ms ease-in-out', style({ left: '1rem' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"content\">\n    <mat-icon>file_download</mat-icon>\n    <div class=\"title\">{{ title }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: NgxHelperToastService }], propDecorators: { host: [{
+                type: HostBinding,
+                args: ['@host']
+            }], className: [{
+                type: HostBinding,
+                args: ['className']
+            }], bottom: [{
+                type: HostBinding,
+                args: ['style.bottom']
+            }] } });
+
+class UploadComponent {
+    httpClient;
     host = true;
+    className = 'ngx-helper-m3-http';
     bottom = '1rem';
     id;
     file;
@@ -1331,8 +1697,8 @@ class UploadComponent {
             error: (error) => this.close('ERROR', error.error, error.status),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UploadComponent, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: UploadComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "upload" }, properties: { "className": "this.className", "@host": "this.host", "style.bottom": "this.bottom" } }, ngImport: i0, template: "<div class=\"content\">\n    <mat-icon>file_upload</mat-icon>\n    <div class=\"file\">{{ file.name }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UploadComponent, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UploadComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "upload" }, properties: { "@host": "this.host", "className": "this.className", "style.bottom": "this.bottom" } }, ngImport: i0, template: "<div class=\"content\">\n    <mat-icon>file_upload</mat-icon>\n    <div class=\"file\">{{ file.name }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
             trigger('host', [
                 transition(':enter', [
                     style({ left: 'calc(-250px - 1rem)' }),
@@ -1341,7 +1707,7 @@ class UploadComponent {
             ]),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'upload' }, imports: [MatIcon], animations: [
                         trigger('host', [
@@ -1351,12 +1717,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"content\">\n    <mat-icon>file_upload</mat-icon>\n    <div class=\"file\">{{ file.name }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['className']
-            }], host: [{
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }], propDecorators: { host: [{
                 type: HostBinding,
                 args: ['@host']
+            }], className: [{
+                type: HostBinding,
+                args: ['className']
             }], bottom: [{
                 type: HostBinding,
                 args: ['style.bottom']
@@ -1365,10 +1731,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 class NgxHelperHttpService {
     applicationRef;
     injector;
+    ngxHelperToastService;
     components = [];
-    constructor(applicationRef, injector) {
+    constructor(applicationRef, injector, ngxHelperToastService) {
         this.applicationRef = applicationRef;
         this.injector = injector;
+        this.ngxHelperToastService = ngxHelperToastService;
     }
     getId() {
         let id = undefined;
@@ -1381,6 +1749,54 @@ class NgxHelperHttpService {
             c.componentRef.instance.bottom = `calc(${(index / 1.5).toFixed(1)}rem + calc(${index * 40}px + 1rem))`;
         });
     }
+    getBuffer(path, title, config) {
+        return new Promise((resolve, reject) => {
+            const componentRef = createComponent(DownloadComponent, {
+                environmentInjector: this.applicationRef.injector,
+                elementInjector: this.injector,
+            });
+            const id = this.getId();
+            componentRef.instance.id = id;
+            componentRef.instance.path = path;
+            componentRef.instance.title = title;
+            componentRef.instance.config = config || {};
+            componentRef.instance.onSuccess = (arrayBuffer) => resolve(arrayBuffer);
+            componentRef.instance.onError = () => reject();
+            componentRef.instance.close = () => {
+                this.applicationRef.detachView(componentRef.hostView);
+                document.body.removeChild(htmlElement);
+                componentRef.destroy();
+                this.components = this.components.filter((c) => c.id !== componentRef.instance.id);
+                this.updatePositions();
+            };
+            const htmlElement = componentRef.hostView.rootNodes[0];
+            this.applicationRef.attachView(componentRef.hostView);
+            document.body.appendChild(htmlElement);
+            this.components.push({ id, componentRef });
+            this.updatePositions();
+        });
+    }
+    download(path, title, config) {
+        const onError = () => this.ngxHelperToastService.error('امکان دانلود فایل وجود ندارد.');
+        const onSuccess = (arrayBuffer) => {
+            try {
+                const split = path
+                    .split('.')
+                    .map((text) => text.trim().replace(/\//gi, ''))
+                    .filter((text) => !!text);
+                const name = Helper.STRING.getFileName(title, split[split.length - 1] || '');
+                const href = URL.createObjectURL(new Blob([arrayBuffer]));
+                const a = document.createElement('a');
+                a.href = href;
+                a.download = name;
+                a.click();
+            }
+            catch (e) {
+                onError();
+            }
+        };
+        this.getBuffer(path, title, config || {}).then(onSuccess, onError);
+    }
     upload(file, url, arg1, arg2, arg3) {
         const config = typeof arg3 === 'function' ? arg1 : {};
         const onSuccess = typeof arg3 === 'function' ? arg2 : arg1;
@@ -1397,6 +1813,7 @@ class NgxHelperHttpService {
         componentRef.instance.close = (type, result, status) => {
             this.applicationRef.detachView(componentRef.hostView);
             document.body.removeChild(htmlElement);
+            componentRef.destroy();
             this.components = this.components.filter((c) => c.id !== componentRef.instance.id);
             this.updatePositions();
             switch (type) {
@@ -1414,13 +1831,41 @@ class NgxHelperHttpService {
         this.components.push({ id, componentRef });
         this.updatePositions();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperHttpService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperHttpService, providedIn: 'root' });
+    printPDF(data, config) {
+        const getPDF = () => {
+            return new Promise((resolve, reject) => {
+                if (typeof data !== 'string') {
+                    resolve(new Blob([data], { type: 'application/pdf' }));
+                    return;
+                }
+                this.getBuffer(data, 'دریافت فایل', config || {}).then((arrayBuffer) => resolve(new Blob([arrayBuffer], { type: 'application/pdf' })), () => reject());
+            });
+        };
+        getPDF().then((blob) => {
+            try {
+                const prevIframe = document.getElementById('ngx-helper-http-pdf-download-iframe');
+                if (prevIframe)
+                    document.body.removeChild(prevIframe);
+                const src = URL.createObjectURL(blob);
+                const iframe = document.createElement('iframe');
+                iframe.id = 'ngx-helper-http-pdf-download-iframe';
+                iframe.style.display = 'none';
+                document.body.appendChild(iframe);
+                iframe.src = src;
+                iframe.onload = () => iframe.contentWindow?.print();
+            }
+            catch (e) {
+                this.ngxHelperToastService.error('امکان پرینت فایل وجود ندارد.');
+            }
+        }, () => this.ngxHelperToastService.error('امکان دانلود فایل وجود ندارد.'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperHttpService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: NgxHelperToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperHttpService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperHttpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperHttpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: NgxHelperToastService }] });
 
 /*
  * Public API Surface of ngx-helper-m3
@@ -1430,5 +1875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGX_HELPER_BOX_DATA, NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_DATA_CHANGE, NGX_HELPER_PAGE_GROUP_ITEM, NgxHelperBankCardPipe, NgxHelperBoxComponent, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperHttpService, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
+export { NGX_HELPER_BOX_DATA, NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_DATA_CHANGE, NGX_HELPER_PAGE_GROUP_ITEM, NgxHelperBankCardPipe, NgxHelperBoxComponent, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperHttpService, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperToastService, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map