@webilix/ngx-helper-m3 0.0.10 → 0.0.12

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, Pipe } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, 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';
@@ -9,15 +9,18 @@ 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 { JalaliDateTime } from '@webilix/jalali-date-time';
 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';
 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 * 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) => {
@@ -76,228 +79,382 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 args: [{ required: false }]
             }] } });
 
-class ComponentService {
-    getComponentConfig(config) {
-        const getStickyView = (config) => {
-            return {
-                desktopView: typeof config === 'string' ? config : config.desktopView,
-                mobileView: typeof config === 'string' ? config : config.mobileView,
-            };
-        };
-        return {
-            mobileWidth: config?.mobileWidth || 600,
-            pageGroupSidebarWidth: config?.pageGroupSidebarWidth || '200px',
-            stickyView: config?.stickyView
-                ? {
-                    top: config.stickyView.top ? getStickyView(config.stickyView.top) : undefined,
-                    bottom: config.stickyView.bottom ? getStickyView(config.stickyView.bottom) : undefined,
-                }
-                : undefined,
-        };
+class NgxHelperBankCardPipe {
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        switch (options?.view) {
+            case 'BANK':
+                return Helper.BANK.findCard(value)?.title || '';
+            default:
+                return Helper.STRING.getBankCardView(value, options?.join || '-');
+        }
     }
-    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.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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ComponentService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBankCardPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperBankCard' }]
         }] });
 
-class NgxHelperCardComponent {
-    componentService;
-    config;
-    className = 'ngx-helper-m3-card';
-    title;
-    subTitle;
-    icon;
-    actions = [];
-    padding = '1rem';
-    backgroundColor;
-    hasShadow = false;
-    isMobile = false;
-    buttons = [];
-    componentConfig;
-    constructor(componentService, config) {
-        this.componentService = componentService;
-        this.config = config;
+class NgxHelperDatePipe {
+    transform(value, options) {
+        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();
+        const timezone = options?.timezone && jalali.timezones().includes(options?.timezone) ? options?.timezone : 'Asia/Tehran';
+        switch (options?.format || 'DATE') {
+            case 'FULL':
+                return jalali.toFullText(date, { format: 'W، d N Y H:I', timezone });
+            case 'SHORT':
+                return jalali.toFullText(date, { format: 'Y/M/D', timezone });
+            case 'DATE':
+                return jalali.toFullText(date, { format: 'W، d N Y', timezone });
+            case 'TIME':
+                return jalali.toFullText(date, { format: 'H:I', timezone });
+            case 'WEEK':
+                const { from, to } = jalali.periodWeek(1, date, timezone);
+                return Helper.DATE.jalaliPeriod(from, to, timezone);
+            case 'MONTH':
+                return jalali.toFullText(date, { format: 'N Y', timezone });
+            case 'YEAR':
+                return jalali.toFullText(date, { format: 'Y', timezone });
+            default:
+                return jalali.toFullText(date, { format: options?.format, timezone });
+        }
     }
-    ngOnInit() {
-        this.componentConfig = this.componentService.getComponentConfig(this.config);
-        this.onResize();
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperDate' }]
+        }] });
+
+class NgxHelperDurationPipe {
+    transform(value, options) {
+        if (value === undefined || value === null)
+            return '';
+        let seconds = 0;
+        if (Helper.IS.number(value))
+            seconds = Math.abs(value);
+        else if (Helper.IS.date(value))
+            seconds = Math.floor(Math.abs(new Date().getTime() - value.getTime()) / 1000);
+        else if (Helper.IS.object(value)) {
+            const from = 'from' in value ? value.from : new Date();
+            const to = 'to' in value ? value.to : new Date();
+            seconds = Math.floor(Math.abs(from.getTime() - to.getTime()) / 1000);
+        }
+        const days = Math.floor(seconds / (24 * 60 * 60));
+        seconds -= days * (24 * 60 * 60);
+        const hours = Math.floor(seconds / (60 * 60));
+        seconds -= hours * (60 * 60);
+        const minutes = Math.floor(seconds / 60);
+        seconds -= minutes * 60;
+        const hasDays = days !== 0;
+        const time = [hours, minutes, seconds].map((v) => v.toString().padStart(2, '0')).join(':');
+        switch (options?.format || 'TEXT') {
+            case 'TEXT':
+                const hasTime = !!hours || !!minutes || !!seconds;
+                const day = hasDays
+                    ? Helper.NUMBER.format(days, 'EN') + (!!options?.english ? (days === 1 ? ' day' : ' days') : ' روز')
+                    : '';
+                const join = hasDays && hasTime ? (!!options?.english ? ', ' : ' و ') : '';
+                return (day + join + (!hasDays || hasTime ? time : '')).trim();
+            case 'FULL':
+                return (hasDays ? Helper.NUMBER.format(days, 'EN') + ':' : '') + time;
+            case 'DAY':
+                return Helper.NUMBER.format(days + (hours !== 0 || minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');
+            case 'HOUR':
+                return Helper.NUMBER.format(days * 24 + hours + (minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');
+            case 'MINUTE':
+                return Helper.NUMBER.format(days * 24 * 60 + hours * 60 + minutes, !!options?.english ? 'EN' : 'FA');
+            case 'SECOND':
+                return Helper.NUMBER.format(days * 24 * 3600 + hours * 3600 + minutes * 60 + seconds, !!options?.english ? 'EN' : 'FA');
+        }
     }
-    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 };
-        });
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDurationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperDuration' }]
+        }] });
+
+class NgxHelperFileSizePipe {
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.number(value))
+            return '';
+        return Helper.NUMBER.toFileSize(value, !!options?.english ? 'EN' : 'FA');
     }
-    onResize() {
-        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperFileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperFileSize' }]
+        }] });
+
+class NgxHelperMobilePipe {
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        return Helper.STRING.getMobileView(value, options?.join || '-');
     }
-    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.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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NGX_HELPER_CONFIG]
-                }] }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['className']
-            }], title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], subTitle: [{
-                type: Input,
-                args: [{ required: false }]
-            }], icon: [{
-                type: Input,
-                args: [{ required: false }]
-            }], actions: [{
-                type: Input,
-                args: [{ required: false }]
-            }], padding: [{
-                type: Input,
-                args: [{ required: false }]
-            }], backgroundColor: [{
-                type: Input,
-                args: [{ required: false }]
-            }], hasShadow: [{
-                type: Input,
-                args: [{ required: false }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMobilePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperMobile' }]
+        }] });
 
-class NgxHelperLoaderComponent {
-    loaderSize;
-    loaderColor;
-    mode;
-    size;
-    color;
-    padding;
-    ngOnChanges(changes) {
-        this.loaderSize = `${this.size || 25}px`;
-        this.loaderColor = this.color || `var(--secondary)`;
+class NgxHelperNumberPipe {
+    transform(value, options) {
+        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');
     }
-    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.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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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"] }]
-        }], propDecorators: { loaderSize: [{
-                type: HostBinding,
-                args: ['style.--loader-size']
-            }], loaderColor: [{
-                type: HostBinding,
-                args: ['style.--loader-color']
-            }], mode: [{
-                type: Input,
-                args: [{ required: true }]
-            }], size: [{
-                type: Input,
-                args: [{ required: false }]
-            }], color: [{
-                type: Input,
-                args: [{ required: false }]
-            }], padding: [{
-                type: Input,
-                args: [{ required: false }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperNumber' }]
+        }] });
 
-const NGX_HELPER_PAGE_GROUP_ITEM = new InjectionToken('NGX-HELPER-PAGE-GROUP-ITEM');
-const NGX_HELPER_PAGE_GROUP_DATA = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA');
-const NGX_HELPER_PAGE_GROUP_DATA_CHANGE = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA-CHANGE');
+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 || '');
+    }
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPeriodPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperPeriod' }]
+        }] });
 
-class NgxHelperPageGroupComponent {
-    activatedRoute;
-    router;
+class NgxHelperPricePipe {
+    transform(value, options) {
+        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 : '';
+            return `${price} ${unit}${currency}`;
+        };
+        if (value < 1000)
+            return getPrice(['', ''], ['', '']);
+        value /= 1000;
+        if (value < 1000)
+            return getPrice(['T', 'ه'], ['Thousand', 'هزار']);
+        value /= 1000;
+        if (value < 1000)
+            return getPrice(['M', 'م'], ['Million', 'میلیون']);
+        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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPricePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperPrice' }]
+        }] });
+
+class NgxHelperVolumePipe {
+    transform(value, options) {
+        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;
+            return `${volume} ${titles[shortIndex][titleIndex]}`;
+        };
+        if (value === 0)
+            return getVolume(['', ''], ['', '']);
+        if (value < 1000)
+            return getVolume(['ML', 'م'], ['Milliliter', 'میلی لیتر']);
+        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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperVolumePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperVolume' }]
+        }] });
+
+class NgxHelperWeightPipe {
+    transform(value, options) {
+        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;
+            return `${weight} ${titles[shortIndex][titleIndex]}`;
+        };
+        if (value === 0)
+            return getWeight(['', ''], ['', '']);
+        if (value < 1000)
+            return getWeight(['G', 'گ'], ['Gram', 'گرم']);
+        value /= 1000;
+        if (value < 1000)
+            return getWeight(['K', 'ک'], ['Kilogram', 'کیلو']);
+        value /= 1000;
+        if (value < 1000)
+            return getWeight(['T', 'ت'], ['Tonne', 'تن']);
+        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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperWeightPipe, decorators: [{
+            type: Pipe,
+            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 ComponentService {
+    getComponentConfig(config) {
+        const getStickyView = (config) => {
+            return {
+                desktopView: typeof config === 'string' ? config : config.desktopView,
+                mobileView: typeof config === 'string' ? config : config.mobileView,
+            };
+        };
+        return {
+            mobileWidth: config?.mobileWidth || 600,
+            pageGroupSidebarWidth: config?.pageGroupSidebarWidth || '200px',
+            stickyView: config?.stickyView
+                ? {
+                    top: config.stickyView.top ? getStickyView(config.stickyView.top) : undefined,
+                    bottom: config.stickyView.bottom ? getStickyView(config.stickyView.bottom) : undefined,
+                }
+                : undefined,
+        };
+    }
+    getValueData(values) {
+        const pipeTransform = new NgxHelperValuePipe().transform;
+        const ltrValues = ['BANK-CARD', 'MOBILE', 'NUMBER'];
+        return 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: pipeTransform(value),
+                        color: item.color,
+                        action: item.action,
+                        copyToClipboard: item.copyToClipboard,
+                        ltr: ltrValues.includes(value.type),
+                        english: 'english' in value && !!value.english,
+                    };
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ComponentService, decorators: [{
+            type: Injectable
+        }] });
+
+class NgxHelperCardComponent {
     componentService;
     config;
-    className = 'ngx-helper-m3-page-group';
-    display = 'none';
-    pageGroup;
-    pageIndex = 0;
-    data;
-    pageIndexChanged = new EventEmitter();
-    dataChanged = new EventEmitter();
+    className = 'ngx-helper-m3-card';
+    title;
+    subTitle;
+    icon;
+    actions = [];
+    padding = '1rem';
+    backgroundColor;
+    hasShadow = false;
     isMobile = false;
-    injector;
-    sidebarWidth;
+    buttons = [];
     componentConfig;
-    constructor(activatedRoute, router, componentService, config) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
+    constructor(componentService, config) {
         this.componentService = componentService;
         this.config = config;
     }
     ngOnInit() {
-        this.display = this.pageGroup.pages.length === 0 ? 'none' : 'flex';
-        if (this.pageGroup.pages.length === 0)
-            return;
         this.componentConfig = this.componentService.getComponentConfig(this.config);
-        this.sidebarWidth = this.pageGroup.sidebarWidth || this.componentConfig.pageGroupSidebarWidth;
-        if (this.pageIndex < 0)
-            this.pageIndex = 0;
-        else if (this.pageIndex > this.pageGroup.pages.length - 1)
-            this.pageIndex = this.pageGroup.pages.length - 1;
-        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
-        if (!!this.pageGroup.route && Helper.IS.number(+queryParams['ngx-helper-page-group'])) {
-            const index = +queryParams['ngx-helper-page-group'];
-            if (index >= 0 && index <= this.pageGroup.pages.length - 1) {
-                this.pageIndex = index;
-                this.pageIndexChanged.next(this.pageIndex);
-            }
-        }
         this.onResize();
-        this.setInjector();
     }
     ngOnChanges(changes) {
-        this.setInjector();
+        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 };
+        });
     }
     onResize() {
         this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
-        this.className = `ngx-helper-m3-page-group${this.isMobile ? ' mobile-view' : ''}`;
-    }
-    setInjector() {
-        if (this.pageGroup.pages.length === 0)
-            return;
-        const item = {
-            index: this.pageIndex,
-            title: this.pageGroup.pages[this.pageIndex].title,
-            icon: this.pageGroup.pages[this.pageIndex].icon,
-        };
-        this.injector = Injector.create({
-            providers: [
-                { provide: NGX_HELPER_PAGE_GROUP_ITEM, useValue: item },
-                { provide: NGX_HELPER_PAGE_GROUP_DATA, useValue: this.data },
-                { provide: NGX_HELPER_PAGE_GROUP_DATA_CHANGE, useValue: (data) => this.dataChanged.next(data) },
-            ],
-        });
-    }
-    setPage(index) {
-        if (this.pageGroup.pages.length === 0)
-            return;
-        if (this.pageIndex === index || index < 0 || index > this.pageGroup.pages.length - 1)
-            return;
-        this.pageIndex = index;
-        this.pageIndexChanged.next(this.pageIndex);
-        this.setInjector();
-        if (this.pageGroup.route) {
-            const queryParams = { ...this.activatedRoute.snapshot.queryParams };
-            queryParams['ngx-helper-page-group'] = this.pageIndex.toString();
-            this.router.navigate(this.pageGroup.route, { queryParams });
-        }
     }
-    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", pageIndex: "pageIndex", data: "data" }, outputs: { pageIndexChanged: "pageIndexChanged", dataChanged: "dataChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pageGroup.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 pageGroup.pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageIndex === $index\"\n        [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n        (click)=\"setPage($index)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ item.icon }}</mat-icon>\n        <div class=\"title\">{{ item.title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageIndex === $index) { <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 pageGroup.pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageIndex === $index\"\n        [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n        (click)=\"setPage($index)\"\n    >\n        <mat-icon>{{ item.icon }}</mat-icon>\n        @if (pageIndex === $index) {\n        <div class=\"title\">{{ 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(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-helper-m3-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <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-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    </header>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].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.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "@if (pageGroup.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 pageGroup.pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageIndex === $index\"\n        [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n        (click)=\"setPage($index)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ item.icon }}</mat-icon>\n        <div class=\"title\">{{ item.title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageIndex === $index) { <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 pageGroup.pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageIndex === $index\"\n        [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n        (click)=\"setPage($index)\"\n    >\n        <mat-icon>{{ item.icon }}</mat-icon>\n        @if (pageIndex === $index) {\n        <div class=\"title\">{{ 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(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-helper-m3-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <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-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    </header>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].component; injector: injector\"></span>\n</div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
+            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: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -305,453 +462,329 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 }] }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], pageGroup: [{
+            }], title: [{
                 type: Input,
                 args: [{ required: true }]
-            }], pageIndex: [{
+            }], subTitle: [{
                 type: Input,
                 args: [{ required: false }]
-            }], data: [{
+            }], icon: [{
+                type: Input,
+                args: [{ required: false }]
+            }], actions: [{
+                type: Input,
+                args: [{ required: false }]
+            }], padding: [{
+                type: Input,
+                args: [{ required: false }]
+            }], backgroundColor: [{
+                type: Input,
+                args: [{ required: false }]
+            }], hasShadow: [{
                 type: Input,
                 args: [{ required: false }]
-            }], pageIndexChanged: [{
-                type: Output
-            }], dataChanged: [{
-                type: Output
             }] } });
 
-class NgxHelperSectionStickyDirective {
-    elementRef;
-    config;
-    ngxHelperSectionSticky;
-    ngxHelperSectionZIndex;
-    componentService = inject(ComponentService);
-    componentConfig;
-    isMobile = false;
-    constructor(elementRef, config) {
-        this.elementRef = elementRef;
-        this.config = config;
-    }
-    ngOnInit() {
-        this.componentConfig = this.componentService.getComponentConfig(this.config);
-        this.onResize();
-    }
-    onResize() {
-        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
-        this.setPosition();
-    }
-    setPosition() {
-        const element = this.elementRef.nativeElement;
-        if (!element)
-            return;
-        switch (this.ngxHelperSectionSticky) {
-            case 'TOP':
-                const top = this.componentConfig.stickyView?.top;
-                if (!top)
-                    return;
-                element.style.position = 'sticky';
-                element.style.zIndex = this.ngxHelperSectionZIndex ? this.ngxHelperSectionZIndex.toString() : '1';
-                element.style.top = this.isMobile ? top.mobileView : top.desktopView;
-                break;
-            case 'BOTTOM':
-                const bottom = this.componentConfig.stickyView?.bottom;
-                if (!bottom)
-                    return;
-                element.style.position = 'sticky';
-                element.style.zIndex = this.ngxHelperSectionZIndex ? this.ngxHelperSectionZIndex.toString() : '1';
-                element.style.bottom = this.isMobile ? bottom.mobileView : bottom.desktopView;
-                break;
-        }
+class NgxHelperLoaderComponent {
+    loaderSize;
+    loaderColor;
+    mode;
+    size;
+    color;
+    padding;
+    ngOnChanges(changes) {
+        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: 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.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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionStickyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxHelperSectionSticky]',
-                    host: { '(window:resize)': 'onResize($event)' },
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NGX_HELPER_CONFIG]
-                }] }], propDecorators: { ngxHelperSectionSticky: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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"] }]
+        }], propDecorators: { loaderSize: [{
+                type: HostBinding,
+                args: ['style.--loader-size']
+            }], loaderColor: [{
+                type: HostBinding,
+                args: ['style.--loader-color']
+            }], mode: [{
                 type: Input,
                 args: [{ required: true }]
-            }], ngxHelperSectionZIndex: [{
+            }], size: [{
+                type: Input,
+                args: [{ required: false }]
+            }], color: [{
+                type: Input,
+                args: [{ required: false }]
+            }], padding: [{
                 type: Input,
                 args: [{ required: false }]
             }] } });
 
-class NgxHelperSectionComponent {
+const NGX_HELPER_PAGE_GROUP_ITEM = new InjectionToken('NGX-HELPER-PAGE-GROUP-ITEM');
+const NGX_HELPER_PAGE_GROUP_DATA = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA');
+const NGX_HELPER_PAGE_GROUP_DATA_CHANGE = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA-CHANGE');
+
+class NgxHelperPageGroupComponent {
+    activatedRoute;
+    router;
     componentService;
     config;
-    gap;
-    gapSize;
-    componentConfig;
+    className = 'ngx-helper-m3-page-group';
+    display = 'none';
+    pageGroup;
+    pageId;
+    data;
+    pageChanged = new EventEmitter();
+    dataChanged = new EventEmitter();
     isMobile = false;
-    constructor(componentService, config) {
+    pages = [];
+    injector;
+    sidebarWidth;
+    componentConfig;
+    constructor(activatedRoute, router, componentService, config) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
         this.componentService = componentService;
         this.config = config;
     }
     ngOnInit() {
+        this.pages = Object.keys(this.pageGroup.pages);
+        this.display = this.pages.length === 0 ? 'none' : 'flex';
+        if (this.pages.length === 0)
+            return;
         this.componentConfig = this.componentService.getComponentConfig(this.config);
-        this.gap = this.gapSize || '1rem';
+        this.sidebarWidth = this.pageGroup.sidebarWidth || this.componentConfig.pageGroupSidebarWidth;
+        if (!this.pageGroup.pages[this.pageId])
+            this.pageId = this.pages[0];
+        const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+        if (!!this.pageGroup.route && Helper.IS.string(queryParams['ngx-helper-page-group'])) {
+            const id = queryParams['ngx-helper-page-group'];
+            if (this.pageId !== id && this.pages.includes(id)) {
+                this.pageId = id;
+                this.triggerPageChanged();
+            }
+        }
         this.onResize();
+        this.setInjector();
+    }
+    ngOnChanges(changes) {
+        this.setInjector();
     }
     onResize() {
         this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
+        this.className = `ngx-helper-m3-page-group${this.isMobile ? ' mobile-view' : ''}`;
     }
-    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"] });
+    setInjector() {
+        if (this.pages.length === 0)
+            return;
+        const item = {
+            index: this.pages.findIndex((page) => page === this.pageId),
+            id: this.pageId,
+            title: this.pageGroup.pages[this.pageId].title,
+            icon: this.pageGroup.pages[this.pageId].icon,
+        };
+        this.injector = Injector.create({
+            providers: [
+                { provide: NGX_HELPER_PAGE_GROUP_ITEM, useValue: item },
+                { provide: NGX_HELPER_PAGE_GROUP_DATA, useValue: this.data },
+                { provide: NGX_HELPER_PAGE_GROUP_DATA_CHANGE, useValue: (data) => this.dataChanged.next(data) },
+            ],
+        });
+    }
+    setPage(id) {
+        if (this.pages.length === 0 || this.pageId == id)
+            return;
+        const page = this.pageGroup.pages[id];
+        const index = this.pages.findIndex((p) => p === id);
+        if (!page || index === -1)
+            return;
+        this.pageId = id;
+        this.triggerPageChanged();
+        this.setInjector();
+        if (this.pageGroup.route) {
+            const queryParams = { ...this.activatedRoute.snapshot.queryParams };
+            queryParams['ngx-helper-page-group'] = this.pageId;
+            this.router.navigate(this.pageGroup.route, { queryParams });
+        }
+    }
+    triggerPageChanged() {
+        const item = {
+            index: this.pages.findIndex((page) => page === this.pageId),
+            id: this.pageId,
+            title: this.pageGroup.pages[this.pageId].title,
+            icon: this.pageGroup.pages[this.pageId].icon,
+        };
+        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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPageGroupComponent, 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: [{
+            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: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [NGX_HELPER_CONFIG]
-                }] }], propDecorators: { gap: [{
-                type: HostBinding,
-                args: ['style.--section-gap']
-            }], gapSize: [{
-                type: Input,
-                args: [{ required: false }]
-            }] } });
-
-class NgxHelperSectionColumnComponent {
-    flexStyle = '1';
-    widthStyle = '*';
-    flex;
-    width;
-    sticky;
-    ngOnChanges(changes) {
-        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: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionColumnComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-helper-section-column', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { flexStyle: [{
+                }] }], propDecorators: { className: [{
                 type: HostBinding,
-                args: ['style.flex']
-            }], widthStyle: [{
+                args: ['className']
+            }], display: [{
                 type: HostBinding,
-                args: ['style.width']
-            }], flex: [{
+                args: ['style.display']
+            }], pageGroup: [{
                 type: Input,
-                args: [{ required: false }]
-            }], width: [{
+                args: [{ required: true }]
+            }], pageId: [{
                 type: Input,
                 args: [{ required: false }]
-            }], sticky: [{
+            }], data: [{
                 type: Input,
                 args: [{ required: false }]
+            }], pageChanged: [{
+                type: Output
+            }], dataChanged: [{
+                type: Output
             }] } });
 
-const ltrValues = ['BANK-CARD', 'MOBILE', 'NUMBER'];
-
-class NgxHelperBankCardPipe {
-    transform(value, options) {
-        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
-            return '';
-        switch (options?.view) {
-            case 'BANK':
-                return Helper.BANK.findCard(value)?.title || '';
-            default:
-                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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperBankCardPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperBankCard' }]
-        }] });
-
-class NgxHelperDatePipe {
-    transform(value, options) {
-        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();
-        const timezone = options?.timezone && jalali.timezones().includes(options?.timezone) ? options?.timezone : 'Asia/Tehran';
-        switch (options?.format || 'DATE') {
-            case 'FULL':
-                return jalali.toFullText(date, { format: 'W، d N Y H:I', timezone });
-            case 'SHORT':
-                return jalali.toFullText(date, { format: 'Y/M/D', timezone });
-            case 'DATE':
-                return jalali.toFullText(date, { format: 'W، d N Y', timezone });
-            case 'TIME':
-                return jalali.toFullText(date, { format: 'H:I', timezone });
-            case 'WEEK':
-                const { from, to } = jalali.periodWeek(1, date, timezone);
-                return Helper.DATE.jalaliPeriod(from, to, timezone);
-            case 'MONTH':
-                return jalali.toFullText(date, { format: 'N Y', timezone });
-            case 'YEAR':
-                return jalali.toFullText(date, { format: 'Y', timezone });
-            default:
-                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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDatePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperDate' }]
-        }] });
-
-class NgxHelperDurationPipe {
-    transform(value, options) {
-        if (value === undefined || value === null)
-            return '';
-        let seconds = 0;
-        if (Helper.IS.number(value))
-            seconds = Math.abs(value);
-        else if (Helper.IS.date(value))
-            seconds = Math.floor(Math.abs(new Date().getTime() - value.getTime()) / 1000);
-        else if (Helper.IS.object(value)) {
-            const from = 'from' in value ? value.from : new Date();
-            const to = 'to' in value ? value.to : new Date();
-            seconds = Math.floor(Math.abs(from.getTime() - to.getTime()) / 1000);
-        }
-        const days = Math.floor(seconds / (24 * 60 * 60));
-        seconds -= days * (24 * 60 * 60);
-        const hours = Math.floor(seconds / (60 * 60));
-        seconds -= hours * (60 * 60);
-        const minutes = Math.floor(seconds / 60);
-        seconds -= minutes * 60;
-        const hasDays = days !== 0;
-        const time = [hours, minutes, seconds].map((v) => v.toString().padStart(2, '0')).join(':');
-        switch (options?.format || 'TEXT') {
-            case 'TEXT':
-                const hasTime = !!hours || !!minutes || !!seconds;
-                const day = hasDays
-                    ? Helper.NUMBER.format(days, 'EN') + (!!options?.english ? (days === 1 ? ' day' : ' days') : ' روز')
-                    : '';
-                const join = hasDays && hasTime ? (!!options?.english ? ', ' : ' و ') : '';
-                return (day + join + (!hasDays || hasTime ? time : '')).trim();
-            case 'FULL':
-                return (hasDays ? Helper.NUMBER.format(days, 'EN') + ':' : '') + time;
-            case 'DAY':
-                return Helper.NUMBER.format(days + (hours !== 0 || minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');
-            case 'HOUR':
-                return Helper.NUMBER.format(days * 24 + hours + (minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');
-            case 'MINUTE':
-                return Helper.NUMBER.format(days * 24 * 60 + hours * 60 + minutes, !!options?.english ? 'EN' : 'FA');
-            case 'SECOND':
-                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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperDurationPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperDuration' }]
-        }] });
-
-class NgxHelperFileSizePipe {
-    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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperFileSizePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperFileSize' }]
-        }] });
-
-class NgxHelperMobilePipe {
-    transform(value, options) {
-        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
-            return '';
-        return Helper.STRING.getMobileView(value, options?.join || '-');
+class NgxHelperSectionStickyDirective {
+    elementRef;
+    config;
+    ngxHelperSectionSticky;
+    ngxHelperSectionZIndex;
+    componentService = inject(ComponentService);
+    componentConfig;
+    isMobile = false;
+    constructor(elementRef, config) {
+        this.elementRef = elementRef;
+        this.config = config;
     }
-    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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperMobilePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperMobile' }]
-        }] });
-
-class NgxHelperNumberPipe {
-    transform(value, options) {
-        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');
+    ngOnInit() {
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        this.onResize();
     }
-    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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperNumberPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperNumber' }]
-        }] });
-
-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 || '');
+    onResize() {
+        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
+        this.setPosition();
     }
-    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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPeriodPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperPeriod' }]
-        }] });
-
-class NgxHelperPricePipe {
-    transform(value, options) {
-        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 : '';
-            return `${price} ${unit}${currency}`;
-        };
-        if (value < 1000)
-            return getPrice(['', ''], ['', '']);
-        value /= 1000;
-        if (value < 1000)
-            return getPrice(['T', 'ه'], ['Thousand', 'هزار']);
-        value /= 1000;
-        if (value < 1000)
-            return getPrice(['M', 'م'], ['Million', 'میلیون']);
-        value /= 1000;
-        return getPrice(['B', 'د'], ['Billion', 'میلیارد']);
+    setPosition() {
+        const element = this.elementRef.nativeElement;
+        if (!element)
+            return;
+        switch (this.ngxHelperSectionSticky) {
+            case 'TOP':
+                const top = this.componentConfig.stickyView?.top;
+                if (!top)
+                    return;
+                element.style.position = 'sticky';
+                element.style.zIndex = this.ngxHelperSectionZIndex ? this.ngxHelperSectionZIndex.toString() : '1';
+                element.style.top = this.isMobile ? top.mobileView : top.desktopView;
+                break;
+            case 'BOTTOM':
+                const bottom = this.componentConfig.stickyView?.bottom;
+                if (!bottom)
+                    return;
+                element.style.position = 'sticky';
+                element.style.zIndex = this.ngxHelperSectionZIndex ? this.ngxHelperSectionZIndex.toString() : '1';
+                element.style.bottom = this.isMobile ? bottom.mobileView : bottom.desktopView;
+                break;
+        }
     }
-    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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperPricePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperPrice' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionStickyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxHelperSectionSticky]',
+                    host: { '(window:resize)': 'onResize($event)' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { ngxHelperSectionSticky: [{
+                type: Input,
+                args: [{ required: true }]
+            }], ngxHelperSectionZIndex: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
 
-class NgxHelperVolumePipe {
-    transform(value, options) {
-        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;
-            return `${volume} ${titles[shortIndex][titleIndex]}`;
-        };
-        if (value === 0)
-            return getVolume(['', ''], ['', '']);
-        if (value < 1000)
-            return getVolume(['ML', 'م'], ['Milliliter', 'میلی لیتر']);
-        value /= 1000;
-        return getVolume(['L', 'ل'], ['Liter', 'لیتر']);
+class NgxHelperSectionComponent {
+    componentService;
+    config;
+    gap;
+    gapSize;
+    componentConfig;
+    isMobile = false;
+    constructor(componentService, config) {
+        this.componentService = componentService;
+        this.config = config;
     }
-    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" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperVolumePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperVolume' }]
-        }] });
-
-class NgxHelperWeightPipe {
-    transform(value, options) {
-        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;
-            return `${weight} ${titles[shortIndex][titleIndex]}`;
-        };
-        if (value === 0)
-            return getWeight(['', ''], ['', '']);
-        if (value < 1000)
-            return getWeight(['G', 'گ'], ['Gram', 'گرم']);
-        value /= 1000;
-        if (value < 1000)
-            return getWeight(['K', 'ک'], ['Kilogram', 'کیلو']);
-        value /= 1000;
-        if (value < 1000)
-            return getWeight(['T', 'ت'], ['Tonne', 'تن']);
-        value /= 1000;
-        return getWeight(['KT', 'ه'], ['Kilotonne', 'هزار تن']);
+    ngOnInit() {
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        this.gap = this.gapSize || '1rem';
+        this.onResize();
     }
-    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" });
+    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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperWeightPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperWeight' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { gap: [{
+                type: HostBinding,
+                args: ['style.--section-gap']
+            }], gapSize: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
 
-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;
-        }
+class NgxHelperSectionColumnComponent {
+    flexStyle = '1';
+    widthStyle = '*';
+    flex;
+    width;
+    sticky;
+    ngOnChanges(changes) {
+        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: 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.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: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperValuePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperValue' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperSectionColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-helper-section-column', imports: [], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { flexStyle: [{
+                type: HostBinding,
+                args: ['style.flex']
+            }], widthStyle: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], flex: [{
+                type: Input,
+                args: [{ required: false }]
+            }], width: [{
+                type: Input,
+                args: [{ required: false }]
+            }], sticky: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
 
 class NgxHelperValueBoxComponent {
     router;
@@ -770,7 +803,6 @@ class NgxHelperValueBoxComponent {
     copyIndex;
     copyTimeout;
     componentConfig;
-    pipeTransform = new NgxHelperValuePipe().transform;
     constructor(router, componentService, config) {
         this.router = router;
         this.componentService = componentService;
@@ -783,21 +815,7 @@ class NgxHelperValueBoxComponent {
     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,
-                    };
-        });
+        this.data = this.componentService.getValueData(this.values);
     }
     onResize() {
         if (this.values.length === 0)
@@ -831,11 +849,11 @@ class NgxHelperValueBoxComponent {
         }, 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        [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 ɵ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"] }] });
 }
 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=\"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        [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" }]
+            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: [{
                     type: Optional
                 }, {
@@ -872,6 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class NgxHelperValueListComponent {
     router;
+    componentService;
     className = 'ngx-helper-m3-value-list';
     values;
     titleWidth = '20%';
@@ -879,26 +898,12 @@ class NgxHelperValueListComponent {
     data = [];
     copyIndex;
     copyTimeout;
-    pipeTransform = new NgxHelperValuePipe().transform;
-    constructor(router) {
+    constructor(router, componentService) {
         this.router = router;
+        this.componentService = componentService;
     }
     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,
-                    };
-        });
+        this.data = this.componentService.getValueData(this.values);
     }
     onClick(action) {
         if (!action)
@@ -917,13 +922,13 @@ 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 }], 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=\"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            [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"] }] });
+    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"] }] });
 }
 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=\"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            [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: [{
+            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: [{
                 type: HostBinding,
                 args: ['className']
             }], values: [{
@@ -1271,6 +1276,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
 
+class UploadComponent {
+    httpClient;
+    className = 'ngx-helper-m3-http';
+    host = true;
+    bottom = '1rem';
+    id;
+    file;
+    url;
+    config;
+    close;
+    progress = 0;
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    ngAfterViewInit() {
+        setTimeout(this.upload.bind(this), 0);
+    }
+    upload() {
+        const formData = new FormData();
+        formData.append('file', this.file);
+        const body = this.config.body || {};
+        Object.keys(body).forEach((k) => formData.append(k, body[k]));
+        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 || 'POST') {
+            case 'POST':
+                request = this.httpClient.post(this.url, formData, { headers, reportProgress: true, observe: 'events' });
+                break;
+            case 'PUT':
+                request = this.httpClient.put(this.url, formData, { headers, reportProgress: true, observe: 'events' });
+                break;
+            case 'PATCH':
+                request = this.httpClient.patch(this.url, formData, { headers, reportProgress: true, observe: 'events' });
+                break;
+        }
+        request.subscribe({
+            next: (event) => {
+                switch (event.type) {
+                    case HttpEventType.UploadProgress:
+                        if (!event.loaded || !event.total)
+                            return;
+                        const progress = (event.loaded / event.total) * 100;
+                        this.progress = progress > 100 ? 100 : +progress.toFixed(2);
+                        break;
+                    case HttpEventType.Response:
+                        this.progress = 100;
+                        this.close('RESPONSE', event.body, event.status);
+                        break;
+                }
+            },
+            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: [
+            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.4", ngImport: i0, type: UploadComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'upload' }, 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_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: [{
+                type: HostBinding,
+                args: ['@host']
+            }], bottom: [{
+                type: HostBinding,
+                args: ['style.bottom']
+            }] } });
+
+class NgxHelperHttpService {
+    applicationRef;
+    injector;
+    components = [];
+    constructor(applicationRef, injector) {
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+    }
+    getId() {
+        let id = undefined;
+        while (!id || this.components.some((c) => c.id === id))
+            id = Helper.STRING.getRandom(10);
+        return id;
+    }
+    updatePositions() {
+        this.components.forEach((c, index) => {
+            c.componentRef.instance.bottom = `calc(${(index / 1.5).toFixed(1)}rem + calc(${index * 40}px + 1rem))`;
+        });
+    }
+    upload(file, url, arg1, arg2, arg3) {
+        const config = typeof arg3 === 'function' ? arg1 : {};
+        const onSuccess = typeof arg3 === 'function' ? arg2 : arg1;
+        const onError = typeof arg3 === 'function' ? arg3 : arg2;
+        const componentRef = createComponent(UploadComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        const id = this.getId();
+        componentRef.instance.id = id;
+        componentRef.instance.file = file;
+        componentRef.instance.url = url;
+        componentRef.instance.config = config;
+        componentRef.instance.close = (type, result, status) => {
+            this.applicationRef.detachView(componentRef.hostView);
+            document.body.removeChild(htmlElement);
+            this.components = this.components.filter((c) => c.id !== componentRef.instance.id);
+            this.updatePositions();
+            switch (type) {
+                case 'RESPONSE':
+                    onSuccess(result || undefined, status);
+                    break;
+                case 'ERROR':
+                    onError(result || undefined, status);
+                    break;
+            }
+        };
+        const htmlElement = componentRef.hostView.rootNodes[0];
+        this.applicationRef.attachView(componentRef.hostView);
+        document.body.appendChild(htmlElement);
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxHelperHttpService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+
 /*
  * Public API Surface of ngx-helper-m3
  */
@@ -1279,5 +1430,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, 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, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map