@webilix/ngx-helper-m3 0.0.6 → 0.0.8

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

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injectable, Component, Optional, Inject, HostBinding, Input, EventEmitter, Injector, Output, inject, Directive, Pipe } from '@angular/core';
-import { NgClass, NgComponentOutlet } from '@angular/common';
+import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, Pipe } from '@angular/core';
+import { NgComponentOutlet, NgClass } from '@angular/common';
 import * as i1$2 from '@angular/material/button';
-import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import { MatDivider } from '@angular/material/divider';
-import * as i3 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { Helper } from '@webilix/helper-library';
 import * as i1 from '@angular/router';
+import * as i3 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { JalaliDateTime } from '@webilix/jalali-date-time';
 import * as i1$1 from '@angular/platform-browser';
 import * as i2$1 from '@angular/material/dialog';
@@ -23,6 +25,57 @@ const provideNgxHelperConfig = (config) => {
     return makeEnvironmentProviders(providers);
 };
 
+const NGX_HELPER_BOX_DATA = new InjectionToken('NGX-HELPER-BOX-DATA');
+
+class NgxHelperBoxComponent {
+    className = 'ngx-helper-m3-box';
+    paddingCSS;
+    component;
+    data;
+    padding = '1rem';
+    hideShadow = false;
+    injector;
+    ngOnInit() {
+        this.setInjector();
+    }
+    ngOnChanges(changes) {
+        this.setInjector();
+    }
+    setInjector() {
+        this.paddingCSS = this.padding;
+        this.className = `ngx-helper-m3-box${this.hideShadow ? ' hide-shadow' : ''}`;
+        if (!this.component)
+            return;
+        this.injector = Injector.create({
+            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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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: [{
+                type: HostBinding,
+                args: ['className']
+            }], paddingCSS: [{
+                type: HostBinding,
+                args: ['style.padding']
+            }], component: [{
+                type: Input,
+                args: [{ required: false }]
+            }], data: [{
+                type: Input,
+                args: [{ required: false }]
+            }], padding: [{
+                type: Input,
+                args: [{ required: false }]
+            }], hideShadow: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
 class ComponentService {
     getComponentConfig(config) {
         const getStickyView = (config) => {
@@ -59,6 +112,7 @@ class NgxHelperCardComponent {
     actions = [];
     padding = '1rem';
     backgroundColor;
+    hasShadow = false;
     isMobile = false;
     buttons = [];
     componentConfig;
@@ -71,6 +125,7 @@ class NgxHelperCardComponent {
         this.onResize();
     }
     ngOnChanges(changes) {
+        this.className = `ngx-helper-m3-card${this.hasShadow ? ' has-shadow' : ''}`;
         this.buttons = this.actions.map((action) => {
             return 'buttons' in action ? { type: 'MENU', ...action } : { type: 'BUTTON', ...action };
         });
@@ -79,7 +134,7 @@ class NgxHelperCardComponent {
         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" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<header>\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</header>\n\n<content [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\"><ng-content></ng-content></content>\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 ɵ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: "<header>\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</header>\n\n<content [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\"><ng-content></ng-content></content>\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: [{
             type: Component,
@@ -110,6 +165,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }], backgroundColor: [{
                 type: Input,
                 args: [{ required: false }]
+            }], hasShadow: [{
+                type: Input,
+                args: [{ required: false }]
             }] } });
 
 class NgxHelperLoaderComponent {
@@ -395,9 +453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 args: [{ required: false }]
             }] } });
 
+const ltrValues = ['BANK-CARD', 'MOBILE', 'NUMBER'];
+
 class NgxHelperBankCardPipe {
     transform(value, options) {
-        if (!Helper.IS.string(value) || value === '')
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
             return '';
         switch (options?.view) {
             case 'BANK':
@@ -416,7 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperDatePipe {
     transform(value, options) {
-        if (!value || (!Helper.IS.date(value) && !Helper.IS.number(value)))
+        if (value === undefined || value === null || (!Helper.IS.date(value) && !Helper.IS.number(value)))
             return '';
         const date = typeof value === 'number' ? new Date(value) : value;
         const jalali = JalaliDateTime();
@@ -451,6 +511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperDurationPipe {
     transform(value, options) {
+        if (value === undefined || value === null)
+            return '';
         let seconds = 0;
         if (Helper.IS.number(value))
             seconds = Math.abs(value);
@@ -498,8 +560,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
         }] });
 
 class NgxHelperFileSizePipe {
-    transform(size, options) {
-        return Helper.NUMBER.toFileSize(size, !!options?.english ? 'EN' : 'FA');
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.number(value))
+            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" });
@@ -511,7 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperMobilePipe {
     transform(value, options) {
-        if (!Helper.IS.string(value) || value === '')
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
             return '';
         return Helper.STRING.getMobileView(value, options?.join || '-');
     }
@@ -523,29 +587,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             args: [{ name: 'ngxHelperMobile' }]
         }] });
 
-class NgxHelperMultiLinePipe {
-    sanitizer;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(value, options) {
-        if (!Helper.IS.string(value) || value === '')
-            return '';
-        return options?.html
-            ? this.sanitizer.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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperMultiLine' }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
-
 class NgxHelperNumberPipe {
     transform(value, options) {
-        if (!Helper.IS.number(value))
+        if (value === undefined || value === null || !Helper.IS.number(value))
             return '';
         value = options?.fractionDigits ? +value.toFixed(options?.fractionDigits) : value;
         return Helper.NUMBER.format(value, options?.english ? 'EN' : 'FA');
@@ -560,6 +604,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperPeriodPipe {
     transform(value, options) {
+        if (value === undefined || value === null)
+            return '';
         const from = Helper.IS.date(value) ? value : 'from' in value ? value.from : new Date();
         const to = Helper.IS.date(value) ? new Date() : 'to' in value ? value.to : new Date();
         return Helper.DATE.jalaliPeriod(from, to, options?.timezone || '');
@@ -574,9 +620,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperPricePipe {
     transform(value, options) {
-        if (!Helper.IS.number(value) || value < 0)
+        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0)
             return '';
         const getPrice = (...titles) => {
+            if (value === undefined || value === null)
+                return '';
             const price = Helper.NUMBER.format(+value.toFixed(2), !!options?.english ? 'EN' : 'FA');
             const unit = titles[options?.short ? 0 : 1][options?.english ? 0 : 1];
             const currency = options?.currency ? ' ' + options?.currency : '';
@@ -601,40 +649,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             args: [{ name: 'ngxHelperPrice' }]
         }] });
 
-class NgxHelperSafePipe {
-    domSanitizer;
-    constructor(domSanitizer) {
-        this.domSanitizer = domSanitizer;
-    }
-    transform(value, options) {
-        if (!Helper.IS.string(value) || value === '')
-            return '';
-        switch (options?.type || 'HTML') {
-            case 'STYLE':
-                return this.domSanitizer.bypassSecurityTrustStyle(value);
-            case 'SCRIPT':
-                return this.domSanitizer.bypassSecurityTrustScript(value);
-            case 'URL':
-                return this.domSanitizer.bypassSecurityTrustUrl(value);
-            case 'RESOURCE_URL':
-                return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
-            case 'HTML':
-                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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperSafe' }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
-
 class NgxHelperVolumePipe {
     transform(value, options) {
-        if (!Helper.IS.number(value) || value < 0)
+        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0)
             return '';
         const getVolume = (...titles) => {
+            if (value === undefined || value === null)
+                return '';
             const volume = Helper.NUMBER.format(+value.toFixed(2), options?.english ? 'EN' : 'FA');
             const shortIndex = options?.short ? 0 : 1;
             const titleIndex = options?.english ? 0 : 1;
@@ -657,9 +678,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperWeightPipe {
     transform(value, options) {
-        if (!Helper.IS.number(value) || value < 0)
+        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0)
             return '';
         const getWeight = (...titles) => {
+            if (value === undefined || value === null)
+                return '';
             const weight = Helper.NUMBER.format(+value.toFixed(2), options?.english ? 'EN' : 'FA');
             const shortIndex = options?.short ? 0 : 1;
             const titleIndex = options?.english ? 0 : 1;
@@ -686,11 +709,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             args: [{ name: 'ngxHelperWeight' }]
         }] });
 
+class NgxHelperValuePipe {
+    transform(value, options) {
+        const emptyText = options?.emptyText || '';
+        if (value === undefined || Helper.IS.empty(value))
+            return emptyText;
+        switch (value.type) {
+            case 'BANK-CARD':
+                return new NgxHelperBankCardPipe().transform(value.value, value) || emptyText;
+            case 'DATE':
+                return new NgxHelperDatePipe().transform(value.value, value) || emptyText;
+            case 'DURATION':
+                return new NgxHelperDurationPipe().transform(value.value, value) || emptyText;
+            case 'FILE-SIZE':
+                return new NgxHelperFileSizePipe().transform(value.value, value) || emptyText;
+            case 'MOBILE':
+                return new NgxHelperMobilePipe().transform(value.value, value) || emptyText;
+            case 'NUMBER':
+                return new NgxHelperNumberPipe().transform(value.value, value) || emptyText;
+            case 'PERIOD':
+                return new NgxHelperPeriodPipe().transform(value.value, value) || emptyText;
+            case 'PRICE':
+                return new NgxHelperPricePipe().transform(value.value, value) || emptyText;
+            case 'STRING':
+                return Helper.IS.string(value.value) ? value.value : emptyText;
+            case 'VOLUME':
+                return new NgxHelperVolumePipe().transform(value.value, value) || emptyText;
+            case 'WEIGHT':
+                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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperValue' }]
+        }] });
+
+class NgxHelperValueBoxComponent {
+    router;
+    componentService;
+    config;
+    className = 'ngx-helper-m3-value-box';
+    gridTemplateColumns;
+    boxGap;
+    values;
+    column;
+    clearBox = false;
+    emptyText = 'نامشخص';
+    gapSize = '1rem';
+    hideShadow = false;
+    data = [];
+    copyIndex;
+    copyTimeout;
+    componentConfig;
+    pipeTransform = new NgxHelperValuePipe().transform;
+    constructor(router, componentService, config) {
+        this.router = router;
+        this.componentService = componentService;
+        this.config = config;
+    }
+    ngOnInit() {
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        this.onResize();
+    }
+    ngOnChanges(changes) {
+        this.boxGap = this.gapSize;
+        this.className = `ngx-helper-m3-value-box${this.hideShadow ? ' hide-shadow' : ''}`;
+        this.data = this.values.map((item) => {
+            const value = item.value;
+            return value === undefined
+                ? { title: item.title, value: '' }
+                : typeof value === 'string'
+                    ? { title: item.title, value: value.trim() }
+                    : {
+                        title: item.title,
+                        value: this.pipeTransform(value),
+                        action: item.action,
+                        copyToClipboard: item.copyToClipboard,
+                        ltr: ltrValues.includes(value.type),
+                        english: 'english' in value && !!value.english,
+                    };
+        });
+    }
+    onResize() {
+        if (this.values.length === 0)
+            return;
+        const isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
+        const columnSize = this.column === undefined
+            ? this.values.length
+            : typeof this.column === 'number'
+                ? this.column
+                : isMobile
+                    ? this.column.mobile || this.values.length
+                    : this.column.desktop || this.values.length;
+        const column = columnSize <= 0 || columnSize > this.values.length ? this.values.length : columnSize;
+        this.gridTemplateColumns = Array(column).fill('1fr').join(' ');
+    }
+    onClick(action) {
+        if (!action)
+            return;
+        const response = action();
+        if (response)
+            this.router.navigate(response);
+    }
+    onCopy(event, index) {
+        event.preventDefault();
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+        this.copyIndex = index;
+        this.copyTimeout = setTimeout(() => {
+            this.copyIndex = undefined;
+            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=\"box\" [class.clear-box]=\"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        [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: [{
+            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=\"box\" [class.clear-box]=\"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        [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: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }], gridTemplateColumns: [{
+                type: HostBinding,
+                args: ['style.grid-template-columns']
+            }], boxGap: [{
+                type: HostBinding,
+                args: ['style.--gap-size']
+            }], values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], column: [{
+                type: Input,
+                args: [{ required: false }]
+            }], clearBox: [{
+                type: Input,
+                args: [{ required: false }]
+            }], emptyText: [{
+                type: Input,
+                args: [{ required: false }]
+            }], gapSize: [{
+                type: Input,
+                args: [{ required: false }]
+            }], hideShadow: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+class NgxHelperValueListComponent {
+    router;
+    className = 'ngx-helper-m3-value-list';
+    values;
+    titleWidth = '20%';
+    emptyText = 'نامشخص';
+    data = [];
+    copyIndex;
+    copyTimeout;
+    pipeTransform = new NgxHelperValuePipe().transform;
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnChanges(changes) {
+        this.data = this.values.map((item) => {
+            const value = item.value;
+            return value === undefined
+                ? { title: item.title, value: '' }
+                : typeof value === 'string'
+                    ? { title: item.title, value: value.trim() }
+                    : {
+                        title: item.title,
+                        value: this.pipeTransform(value),
+                        action: item.action,
+                        copyToClipboard: item.copyToClipboard,
+                        ltr: ltrValues.includes(value.type),
+                        english: 'english' in value && !!value.english,
+                    };
+        });
+    }
+    onClick(action) {
+        if (!action)
+            return;
+        const response = action();
+        if (response)
+            this.router.navigate(response);
+    }
+    onCopy(event, index) {
+        event.preventDefault();
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+        this.copyIndex = index;
+        this.copyTimeout = setTimeout(() => {
+            this.copyIndex = undefined;
+            this.copyTimeout = undefined;
+        }, 2000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValueListComponent, deps: [{ token: i1.Router }], 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" } }, usesOnChanges: true, ngImport: i0, template: "@for (item of data; track $index) {\n<div class=\"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            [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>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: [{
+            type: Component,
+            args: [{ selector: 'ngx-helper-value-list', imports: [ClipboardModule, MatIcon, MatIconButton], template: "@for (item of data; track $index) {\n<div class=\"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            [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>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 }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }], values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], titleWidth: [{
+                type: Input,
+                args: [{ required: false }]
+            }], emptyText: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+class NgxHelperMultiLinePipe {
+    domSanitizer;
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        return options?.html
+            ? 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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperMultiLine' }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
+class NgxHelperSafePipe {
+    domSanitizer;
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        switch (options?.type || 'HTML') {
+            case 'STYLE':
+                return this.domSanitizer.bypassSecurityTrustStyle(value);
+            case 'SCRIPT':
+                return this.domSanitizer.bypassSecurityTrustScript(value);
+            case 'URL':
+                return this.domSanitizer.bypassSecurityTrustUrl(value);
+            case 'RESOURCE_URL':
+                return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
+            case 'HTML':
+                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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperSafe' }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
 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: "<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</content>\n\n<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</footer>\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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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: "<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</content>\n\n<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</footer>\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: [{
             type: Component,
@@ -711,7 +1005,7 @@ class ConfirmBottomSheetComponent {
         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: "<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</content>\n\n<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</footer>\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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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: "<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</content>\n\n<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</footer>\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: [{
             type: Component,
@@ -979,5 +1273,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_ICON, NGX_HELPER_PAGE_GROUP_INDEX, NGX_HELPER_PAGE_GROUP_TITLE, NgxHelperBankCardPipe, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, 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_ICON, NGX_HELPER_PAGE_GROUP_INDEX, NGX_HELPER_PAGE_GROUP_TITLE, NgxHelperBankCardPipe, NgxHelperBoxComponent, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map