@webilix/ngx-helper-m3 0.0.2 → 0.0.3

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

@@ -1,285 +1,326 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, InjectionToken, Injector, Pipe } from '@angular/core';
-import { NgClass, NgComponentOutlet } from '@angular/common';
-import * as i1 from '@angular/material/button';
+import { InjectionToken, makeEnvironmentProviders, Injectable, EventEmitter, Injector, Component, Optional, Inject, HostBinding, Input, Output, inject, Directive, Pipe } from '@angular/core';
+import { NgComponentOutlet, NgClass } from '@angular/common';
+import * as i3 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { Helper } from '@webilix/helper-library';
+import * as i1 from '@angular/router';
+import { JalaliDateTime } from '@webilix/jalali-date-time';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/bottom-sheet';
+import * as i1$3 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
-import { Helper } from '@webilix/helper-library';
-import { JalaliDateTime } from '@webilix/jalali-date-time';
-import * as i1$2 from '@angular/platform-browser';
-
-class ConfirmDialogComponent {
-    confirm = inject(MAT_DIALOG_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" } }, ngImport: i0, template: "<mat-dialog-content>\n    <content>\n        <!-- ICON -->\n        @if (confirm.icon) {\n        <div class=\"icon\">\n            <mat-icon>{{ confirm.icon }}</mat-icon>\n        </div>\n        }\n\n        <!-- CONTENT -->\n        <div class=\"content\">\n            <div class=\"question\">{{ confirm.question }}</div>\n            <!-- DESCRIPTION -->\n            @if (confirm.description) {\n            <div class=\"description\">{{ confirm.description }}</div>\n            }\n            <!-- DATA -->\n            @if (confirm.data) {\n            <div class=\"data\">\n                <div class=\"title\">{{ confirm.data.title }}:</div>\n                <div class=\"value\">{{ confirm.data.value }}</div>\n            </div>\n            }\n        </div>\n    </content>\n</mat-dialog-content>\n<mat-dialog-actions [align]=\"'end'\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</mat-dialog-actions>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
-            type: Component,
-            args: [{ host: { selector: 'confirm-dialog' }, imports: [NgClass, MatButtonModule, MatDialogModule, MatIconModule], template: "<mat-dialog-content>\n    <content>\n        <!-- ICON -->\n        @if (confirm.icon) {\n        <div class=\"icon\">\n            <mat-icon>{{ confirm.icon }}</mat-icon>\n        </div>\n        }\n\n        <!-- CONTENT -->\n        <div class=\"content\">\n            <div class=\"question\">{{ confirm.question }}</div>\n            <!-- DESCRIPTION -->\n            @if (confirm.description) {\n            <div class=\"description\">{{ confirm.description }}</div>\n            }\n            <!-- DATA -->\n            @if (confirm.data) {\n            <div class=\"data\">\n                <div class=\"title\">{{ confirm.data.title }}:</div>\n                <div class=\"value\">{{ confirm.data.value }}</div>\n            </div>\n            }\n        </div>\n    </content>\n</mat-dialog-content>\n<mat-dialog-actions [align]=\"'end'\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</mat-dialog-actions>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}\n"] }]
-        }] });
 
-class ConfirmBottomSheetComponent {
-    matBottomSheetRef;
-    confirm = inject(MAT_BOTTOM_SHEET_DATA);
-    constructor(matBottomSheetRef) {
-        this.matBottomSheetRef = matBottomSheetRef;
-    }
-    close(confirmed) {
-        this.matBottomSheetRef.dismiss(confirmed);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$1.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" } }, ngImport: i0, template: "<content>\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <div class=\"icon\">\n        <mat-icon>{{ confirm.icon }}</mat-icon>\n    </div>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"content\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</content>\n\n<div class=\"buttons\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin:1rem 0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
-            type: Component,
-            args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<content>\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <div class=\"icon\">\n        <mat-icon>{{ confirm.icon }}</mat-icon>\n    </div>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"content\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</content>\n\n<div class=\"buttons\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin:1rem 0 .5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatBottomSheetRef }] });
+const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
+const provideNgxHelperConfig = (config) => {
+    const providers = [{ provide: NGX_HELPER_CONFIG, useValue: config }];
+    return makeEnvironmentProviders(providers);
+};
 
-class NgxHelperConfirmCalss {
-    matBottomSheet;
-    matDialog;
-    confirm;
-    constructor(matBottomSheet, matDialog, confirm) {
-        this.matBottomSheet = matBottomSheet;
-        this.matDialog = matDialog;
-        this.confirm = confirm;
-    }
-    dialog(onConfirmed, arg1, arg2) {
-        const onDenied = typeof arg1 === 'function' ? arg1 : undefined;
-        const config = arg2 || (typeof arg1 !== 'function' ? arg1 : {});
-        this.matDialog
-            .open(ConfirmDialogComponent, {
-            // DEFAULT CONFIG
-            width: 'calc(100vw - 4rem)',
-            direction: 'rtl',
-            enterAnimationDuration: '100ms',
-            exitAnimationDuration: '100ms',
-            // OVERWRITE CONFIG
-            ...config,
-            maxHeight: '80vh',
-            // DATA
-            data: this.confirm,
-        })
-            .afterClosed()
-            .subscribe({ next: (confirmed) => (!!confirmed ? onConfirmed() : onDenied ? onDenied() : undefined) });
-    }
-    bottomSheet(onConfirmed, arg1, arg2) {
-        const onDenied = typeof arg1 === 'function' ? arg1 : undefined;
-        const config = arg2 || (typeof arg1 !== 'function' ? arg1 : {});
-        this.matBottomSheet
-            .open(ConfirmBottomSheetComponent, {
-            // DEFAULT CONFIG
-            direction: 'rtl',
-            // OVERWRITE CONFIG
-            ...config,
-            maxHeight: '80vh',
-            // DATA
-            data: this.confirm,
-        })
-            .afterDismissed()
-            .subscribe({ next: (confirmed) => (!!confirmed ? onConfirmed() : onDenied ? onDenied() : undefined) });
-    }
-}
-class NgxHelperConfirmService {
-    matBottomSheet;
-    matDialog;
-    constructor(matBottomSheet, matDialog) {
-        this.matBottomSheet = matBottomSheet;
-        this.matDialog = matDialog;
-    }
-    verify(confirm) {
-        return new NgxHelperConfirmCalss(this.matBottomSheet, this.matDialog, confirm);
-    }
-    active(data, config) {
-        return this.verify({
-            question: `آیا می‌خواهید ${data.title} انتخاب شده را فعال کنید؟`,
-            description: config?.description,
-            data: data.value ? { title: data.title, value: data.value } : undefined,
-            icon: 'check_box',
-            confirmClass: config?.confirmClass,
-            denyClass: config?.denyClass,
-        });
-    }
-    deactive(data, config) {
-        return this.verify({
-            question: `آیا می‌خواهید ${data.title} انتخاب شده را غیرفعال کنید؟`,
-            description: config?.description,
-            data: data.value ? { title: data.title, value: data.value } : undefined,
-            icon: 'disabled_by_default',
-            confirmClass: config?.confirmClass || 'error',
-            denyClass: config?.denyClass,
-        });
-    }
-    status(active, data, config) {
-        return active ? this.active(data, config || {}) : this.deactive(data, config || {});
-    }
-    delete(data, config) {
-        return this.verify({
-            question: `آیا می‌خواهید ${data.title} انتخاب شده را حذف کنید؟`,
-            description: config?.description,
-            data: data.value ? { title: data.title, value: data.value } : undefined,
-            icon: 'delete',
-            confirmClass: config?.confirmClass || 'error',
-            denyClass: config?.denyClass,
-        });
+class ComponentService {
+    getComponentConfig(config) {
+        const getStickyView = (config) => {
+            return {
+                desktopView: typeof config === 'string' ? config : config.desktopView,
+                mobileView: typeof config === 'string' ? config : config.mobileView,
+            };
+        };
+        return {
+            border: config?.colors?.border || 'var(--outline-variant)',
+            background: config?.colors?.background || 'var(--background)',
+            highlightText: config?.colors?.highlightText || 'var(--secondary)',
+            highlightBackground: config?.colors?.highlightBackground || 'var(--secondary-container)',
+            stickyView: config?.stickyView
+                ? {
+                    top: config.stickyView.top ? getStickyView(config.stickyView.top) : undefined,
+                    bottom: config.stickyView.bottom ? getStickyView(config.stickyView.bottom) : undefined,
+                }
+                : undefined,
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$1.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ComponentService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.MatBottomSheet }, { type: i2.MatDialog }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ComponentService, decorators: [{
+            type: Injectable
+        }] });
 
-const NGX_HELPER_CONTAINER_TYPE = new InjectionToken('NGX-HELPER-CONTAINER-TYPE');
-const NGX_HELPER_CONTAINER_DATA = new InjectionToken('NGX-HELPER-CONTAINER-DATA');
-const NGX_HELPER_CONTAINER_CLOSE = new InjectionToken('NGX-HELPER-CONTAINER-CLOSE');
+const NGX_HELPER_PAGE_GROUP_DATA = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA');
+const NGX_HELPER_PAGE_GROUP_INDEX = new InjectionToken('NGX-HELPER-PAGE-GROUP-INDEX');
+const NGX_HELPER_PAGE_GROUP_TITLE = new InjectionToken('NGX-HELPER-PAGE-GROUP-TITLE');
 
-class ContainerDialogComponent {
-    matDialogRef;
-    container = inject(MAT_DIALOG_DATA);
+class NgxHelperPageGroupComponent {
+    activatedRoute;
+    router;
+    componentService;
+    config;
+    display = 'none';
+    toolbarHeight = '32px';
+    pageGroup;
+    pageIndex = 0;
+    data;
+    pageIndexChanged = new EventEmitter();
+    isMobile = false;
     injector;
-    constructor(matDialogRef) {
-        this.matDialogRef = matDialogRef;
+    sidebarWidth;
+    componentConfig;
+    swipeStart;
+    swipeLeft = 0;
+    constructor(activatedRoute, router, componentService, config) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.componentService = componentService;
+        this.config = config;
     }
     ngOnInit() {
+        this.display = this.pageGroup.pages.length === 0 ? 'none' : 'block';
+        this.sidebarWidth = this.pageGroup.sidebarWidth || this.config?.sidebarWidth || '200px';
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        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();
+    }
+    onResize() {
+        const mobileWidth = this.config?.mobileWidth || 600;
+        this.isMobile = this.pageGroup.mobileView || window.innerWidth <= mobileWidth;
+    }
+    setInjector() {
         this.injector = Injector.create({
             providers: [
-                { provide: NGX_HELPER_CONTAINER_TYPE, useValue: 'DIALOG' },
-                { provide: NGX_HELPER_CONTAINER_DATA, useValue: this.container.config.data },
-                {
-                    provide: NGX_HELPER_CONTAINER_CLOSE,
-                    useFactory: () => (response) => this.matDialogRef.close(response),
-                },
+                { provide: NGX_HELPER_PAGE_GROUP_DATA, useValue: this.data },
+                { provide: NGX_HELPER_PAGE_GROUP_INDEX, useValue: this.pageIndex },
+                { provide: NGX_HELPER_PAGE_GROUP_TITLE, useValue: this.pageGroup.pages[this.pageIndex].title },
             ],
         });
     }
-    close() {
-        this.matDialogRef.close();
+    setPage(index) {
+        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.3", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" } }, ngImport: i0, template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 50px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    swipe(event, action, header, container) {
+        if (header.offsetWidth > container.offsetWidth)
+            return;
+        const clientX = event instanceof MouseEvent ? event.clientX : event.changedTouches[0].clientX;
+        switch (action) {
+            case 'START':
+                this.swipeStart = clientX - this.swipeLeft;
+                break;
+            case 'END':
+                this.swipeStart = undefined;
+                break;
+            case 'MOVE':
+                if (!this.swipeStart)
+                    return;
+                let left = clientX - this.swipeStart;
+                if (left <= 0)
+                    left = 0;
+                else if (left > container.offsetWidth - header.offsetWidth)
+                    left = container.offsetWidth - header.offsetWidth;
+                this.swipeLeft = left;
+                container.style.left = `${left}px`;
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", 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.3", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageIndex: "pageIndex", data: "data" }, outputs: { pageIndexChanged: "pageIndexChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.display": "this.display", "style.--mobile-toolbar-height": "this.toolbarHeight" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<content [class.mobile]=\"isMobile\">\n    <!-- DESKTOP VIEW -->\n    @if (!isMobile) {\n    <section\n        class=\"desktop-pages\"\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            [style.color]=\"pageIndex === $index ? componentConfig.highlightText : ''\"\n            [style.border-color]=\"pageIndex === $index ? componentConfig.highlightText : componentConfig.border\"\n            [style.background-color]=\"pageIndex === $index ? componentConfig.highlightBackground : ''\"\n            [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n            (click)=\"setPage($index)\"\n        >\n            <!-- ICON -->\n            @if (item.icon) { <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    </section>\n    }\n\n    <!-- MOBILE VIEW -->\n    @if (isMobile) {\n    <div\n        class=\"mobile-pages\"\n        [style.background-color]=\"componentConfig.background\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n        (mousedown)=\"swipe($event, 'START', header, container)\"\n        (mousemove)=\"swipe($event, 'MOVE', header, container)\"\n        (mouseup)=\"swipe($event, 'END', header, container)\"\n        (touchstart)=\"swipe($event, 'START', header, container)\"\n        (touchmove)=\"swipe($event, 'MOVE', header, container)\"\n        (touchend)=\"swipe($event, 'END', header, container)\"\n        #header\n    >\n        <div class=\"pages\" #container>\n            @for (item of pageGroup.pages; track $index) {\n            <div\n                class=\"page\"\n                [style.color]=\"pageIndex === $index ? componentConfig.highlightText : ''\"\n                [style.border-color]=\"pageIndex === $index ? componentConfig.highlightText : componentConfig.border\"\n                [style.background-color]=\"pageIndex === $index ? componentConfig.highlightBackground : ''\"\n                [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n                (click)=\"setPage($index)\"\n            >\n                <!-- ICON -->\n                @if (item.icon) { <mat-icon>{{ item.icon }}</mat-icon> }\n                <div class=\"title\">{{ item.title }}</div>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div\n        class=\"seperator\"\n        [style.background-color]=\"componentConfig.background\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            'calc(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--mobile-toolbar-height) + 2px)'\n        \"\n    ></div>\n    }\n\n    <section class=\"content\">\n        <!-- HEADER -->\n        @if (pageGroup.header) {\n        <div\n            [style.background-color]=\"componentConfig.background\"\n            [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n            [style.top]=\"\n                (isMobile\n                    ? 'calc(' +\n                      (componentConfig.stickyView?.top?.mobileView || undefined) +\n                      ' + var(--mobile-toolbar-height) + 2px + 1rem)'\n                    : componentConfig.stickyView?.top?.desktopView) || undefined\n            \"\n        >\n            <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n            <div class=\"seperator\"></div>\n        </div>\n        }\n        <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].component; injector: injector\"></span>\n    </section>\n</content>\n", styles: ["content{direction:rtl;display:flex;align-items:flex-start;column-gap:1rem}content .desktop-pages{display:flex;flex-direction:column;row-gap:.5rem}content .desktop-pages .page{display:flex;align-items:center;column-gap:.5rem;border-radius:8px;padding:.5rem .75rem;border:1px solid var(--outline)}content .desktop-pages .page .title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}content .desktop-pages .page mat-icon{font-size:120%}content .seperator{z-index:2;height:1rem;width:100%}content .content{flex:1;display:block}content.mobile{flex-direction:column;column-gap:0}content.mobile .mobile-pages{z-index:2;height:calc(var(--mobile-toolbar-height) + 2px);overflow-x:hidden;width:100%}content.mobile .mobile-pages .pages{display:inline-flex;align-items:center;column-gap:.5rem;position:relative;left:0}content.mobile .mobile-pages .pages .page{display:flex;align-items:center;column-gap:.25rem;font-size:80%;white-space:nowrap;padding:0 .5rem;border-radius:8px;border:1px solid transparent;height:var(--mobile-toolbar-height)}content.mobile .mobile-pages .pages .page mat-icon{font-size:120%}content.mobile .content{flex:none;width:100%}\n"], 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.3", ngImport: i0, type: ContainerDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'container-dialog' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 50px);overflow:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i2.MatDialogRef }] });
+            args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "<content [class.mobile]=\"isMobile\">\n    <!-- DESKTOP VIEW -->\n    @if (!isMobile) {\n    <section\n        class=\"desktop-pages\"\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            [style.color]=\"pageIndex === $index ? componentConfig.highlightText : ''\"\n            [style.border-color]=\"pageIndex === $index ? componentConfig.highlightText : componentConfig.border\"\n            [style.background-color]=\"pageIndex === $index ? componentConfig.highlightBackground : ''\"\n            [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n            (click)=\"setPage($index)\"\n        >\n            <!-- ICON -->\n            @if (item.icon) { <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    </section>\n    }\n\n    <!-- MOBILE VIEW -->\n    @if (isMobile) {\n    <div\n        class=\"mobile-pages\"\n        [style.background-color]=\"componentConfig.background\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n        (mousedown)=\"swipe($event, 'START', header, container)\"\n        (mousemove)=\"swipe($event, 'MOVE', header, container)\"\n        (mouseup)=\"swipe($event, 'END', header, container)\"\n        (touchstart)=\"swipe($event, 'START', header, container)\"\n        (touchmove)=\"swipe($event, 'MOVE', header, container)\"\n        (touchend)=\"swipe($event, 'END', header, container)\"\n        #header\n    >\n        <div class=\"pages\" #container>\n            @for (item of pageGroup.pages; track $index) {\n            <div\n                class=\"page\"\n                [style.color]=\"pageIndex === $index ? componentConfig.highlightText : ''\"\n                [style.border-color]=\"pageIndex === $index ? componentConfig.highlightText : componentConfig.border\"\n                [style.background-color]=\"pageIndex === $index ? componentConfig.highlightBackground : ''\"\n                [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n                (click)=\"setPage($index)\"\n            >\n                <!-- ICON -->\n                @if (item.icon) { <mat-icon>{{ item.icon }}</mat-icon> }\n                <div class=\"title\">{{ item.title }}</div>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div\n        class=\"seperator\"\n        [style.background-color]=\"componentConfig.background\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            'calc(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--mobile-toolbar-height) + 2px)'\n        \"\n    ></div>\n    }\n\n    <section class=\"content\">\n        <!-- HEADER -->\n        @if (pageGroup.header) {\n        <div\n            [style.background-color]=\"componentConfig.background\"\n            [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n            [style.top]=\"\n                (isMobile\n                    ? 'calc(' +\n                      (componentConfig.stickyView?.top?.mobileView || undefined) +\n                      ' + var(--mobile-toolbar-height) + 2px + 1rem)'\n                    : componentConfig.stickyView?.top?.desktopView) || undefined\n            \"\n        >\n            <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n            <div class=\"seperator\"></div>\n        </div>\n        }\n        <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].component; injector: injector\"></span>\n    </section>\n</content>\n", styles: ["content{direction:rtl;display:flex;align-items:flex-start;column-gap:1rem}content .desktop-pages{display:flex;flex-direction:column;row-gap:.5rem}content .desktop-pages .page{display:flex;align-items:center;column-gap:.5rem;border-radius:8px;padding:.5rem .75rem;border:1px solid var(--outline)}content .desktop-pages .page .title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}content .desktop-pages .page mat-icon{font-size:120%}content .seperator{z-index:2;height:1rem;width:100%}content .content{flex:1;display:block}content.mobile{flex-direction:column;column-gap:0}content.mobile .mobile-pages{z-index:2;height:calc(var(--mobile-toolbar-height) + 2px);overflow-x:hidden;width:100%}content.mobile .mobile-pages .pages{display:inline-flex;align-items:center;column-gap:.5rem;position:relative;left:0}content.mobile .mobile-pages .pages .page{display:flex;align-items:center;column-gap:.25rem;font-size:80%;white-space:nowrap;padding:0 .5rem;border-radius:8px;border:1px solid transparent;height:var(--mobile-toolbar-height)}content.mobile .mobile-pages .pages .page mat-icon{font-size:120%}content.mobile .content{flex:none;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], toolbarHeight: [{
+                type: HostBinding,
+                args: ['style.--mobile-toolbar-height']
+            }], pageGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pageIndex: [{
+                type: Input,
+                args: [{ required: false }]
+            }], data: [{
+                type: Input,
+                args: [{ required: false }]
+            }], pageIndexChanged: [{
+                type: Output
+            }] } });
 
-class ContainerBottomSheetComponent {
-    matBottomSheetRef;
-    container = inject(MAT_BOTTOM_SHEET_DATA);
-    injector;
-    constructor(matBottomSheetRef) {
-        this.matBottomSheetRef = matBottomSheetRef;
+class NgxHelperSectionStickyDirective {
+    elementRef;
+    config;
+    ngxHelperSectionSticky;
+    ngxHelperSectionZIndex;
+    componentService = inject(ComponentService);
+    isMobile = false;
+    constructor(elementRef, config) {
+        this.elementRef = elementRef;
+        this.config = config;
     }
     ngOnInit() {
-        this.injector = Injector.create({
-            providers: [
-                { provide: NGX_HELPER_CONTAINER_TYPE, useValue: 'BOTTOMSHEET' },
-                { provide: NGX_HELPER_CONTAINER_DATA, useValue: this.container.config.data },
-                {
-                    provide: NGX_HELPER_CONTAINER_CLOSE,
-                    useFactory: () => (response) => this.matBottomSheetRef.dismiss(response),
-                },
-            ],
-        });
-    }
-    close() {
-        this.matBottomSheetRef.dismiss();
+        this.onResize();
+    }
+    onResize() {
+        const mobileWidth = this.config?.mobileWidth || 600;
+        this.isMobile = window.innerWidth <= mobileWidth;
+        this.setPosition();
+    }
+    setPosition() {
+        const element = this.elementRef.nativeElement;
+        if (!element)
+            return;
+        const config = this.componentService.getComponentConfig(this.config);
+        switch (this.ngxHelperSectionSticky) {
+            case 'TOP':
+                const top = config.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 = config.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.3", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$1.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" } }, ngImport: i0, template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content>\n    <div [style.padding]=\"container.config.padding || '1rem'\">\n        <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n    </div>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 51px);overflow:auto}::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", 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.3", 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.3", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
-            type: Component,
-            args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content>\n    <div [style.padding]=\"container.config.padding || '1rem'\">\n        <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n    </div>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 51px);overflow:auto}::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatBottomSheetRef }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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 NgxHelperContainerCalss {
-    matBottomSheet;
-    matDialog;
-    container;
-    constructor(matBottomSheet, matDialog, container) {
-        this.matBottomSheet = matBottomSheet;
-        this.matDialog = matDialog;
-        this.container = container;
+class NgxHelperSectionComponent {
+    componentService;
+    config;
+    gap;
+    backgroundColor;
+    gapSize;
+    mobileView;
+    isMobile = false;
+    componentConfig;
+    constructor(componentService, config) {
+        this.componentService = componentService;
+        this.config = config;
     }
-    dialog(arg1, arg2, arg3) {
-        const onResponse = typeof arg1 === 'function' ? arg1 : undefined;
-        const onDismiss = typeof arg2 === 'function' ? arg2 : undefined;
-        const config = arg3 || (typeof arg2 !== 'function' ? arg2 : {});
-        this.matDialog
-            .open(ContainerDialogComponent, {
-            // DEFAULT CONFIG
-            width: 'calc(100vw - 4rem)',
-            direction: 'rtl',
-            enterAnimationDuration: '100ms',
-            exitAnimationDuration: '100ms',
-            // OVERWRITE CONFIG
-            ...config,
-            maxHeight: '80vh',
-            // DATA
-            data: this.container,
-        })
-            .afterClosed()
-            .subscribe({
-            next: (response) => {
-                if (onResponse && !!response)
-                    onResponse(response);
-                if (onDismiss && !response)
-                    onDismiss();
-            },
-        });
+    ngOnInit() {
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        this.gap = this.gapSize || '1rem';
+        this.backgroundColor = this.componentConfig.background;
+        this.onResize();
     }
-    bottomSheet(arg1, arg2, arg3) {
-        const onResponse = typeof arg1 === 'function' ? arg1 : undefined;
-        const onDismiss = typeof arg2 === 'function' ? arg2 : undefined;
-        const config = arg3 || (typeof arg2 !== 'function' ? arg2 : {});
-        this.matBottomSheet
-            .open(ContainerBottomSheetComponent, {
-            // DEFAULT CONFIG
-            direction: 'rtl',
-            panelClass: 'ngx-helper-bottom-sheet',
-            // OVERWRITE CONFIG
-            ...config,
-            maxHeight: '80vh',
-            // DATA
-            data: this.container,
-        })
-            .afterDismissed()
-            .subscribe({
-            next: (response) => {
-                if (onResponse && !!response)
-                    onResponse(response);
-                if (onDismiss && !response)
-                    onDismiss();
-            },
-        });
+    onResize() {
+        const mobileWidth = this.config?.mobileWidth || 600;
+        this.isMobile = this.mobileView || window.innerWidth <= mobileWidth;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", 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.3", type: NgxHelperSectionComponent, isStandalone: true, selector: "ngx-helper-section", inputs: { gapSize: "gapSize", mobileView: "mobileView" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.--section-gap": "this.gap", "style.--section-background-color": "this.backgroundColor" } }, providers: [ComponentService], ngImport: i0, template: "<div class=\"columns\" [class.mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .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);background-color:var(--section-background-color)}:host .mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] });
 }
-class NgxHelperContainerService {
-    matBottomSheet;
-    matDialog;
-    constructor(matBottomSheet, matDialog) {
-        this.matBottomSheet = matBottomSheet;
-        this.matDialog = matDialog;
-    }
-    init(component, title, arg1) {
-        const config = arg1 || {};
-        return new NgxHelperContainerCalss(this.matBottomSheet, this.matDialog, { component, title, config });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$1.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-helper-section', host: { '(window:resize)': 'onResize($event)' }, imports: [], providers: [ComponentService], template: "<div class=\"columns\" [class.mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .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);background-color:var(--section-background-color)}:host .mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .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']
+            }], backgroundColor: [{
+                type: HostBinding,
+                args: ['style.--section-background-color']
+            }], gapSize: [{
+                type: Input,
+                args: [{ required: false }]
+            }], mobileView: [{
+                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.3", ngImport: i0, type: NgxHelperSectionColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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.3", ngImport: i0, type: NgxHelperContainerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.MatBottomSheet }, { type: i2.MatDialog }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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 NgxHelperBankCardPipe {
     transform(value, options) {
@@ -421,13 +462,13 @@ class NgxHelperMultiLinePipe {
             ? this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
             : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperMultiLinePipe, isStandalone: true, name: "ngxHelperMultiLine" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperMultiLine' }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class NgxHelperNumberPipe {
     transform(value, options) {
@@ -508,13 +549,13 @@ class NgxHelperSafePipe {
                 return this.domSanitizer.bypassSecurityTrustHtml(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSafePipe, isStandalone: true, name: "ngxHelperSafe" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxHelperSafe' }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class NgxHelperVolumePipe {
     transform(value, options) {
@@ -572,6 +613,274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{ name: 'ngxHelperWeight' }]
         }] });
 
+class ConfirmDialogComponent {
+    confirm = inject(MAT_DIALOG_DATA);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" } }, ngImport: i0, template: "<mat-dialog-content>\n    <content>\n        <!-- ICON -->\n        @if (confirm.icon) {\n        <div class=\"icon\">\n            <mat-icon>{{ confirm.icon }}</mat-icon>\n        </div>\n        }\n\n        <!-- CONTENT -->\n        <div class=\"content\">\n            <div class=\"question\">{{ confirm.question }}</div>\n            <!-- DESCRIPTION -->\n            @if (confirm.description) {\n            <div class=\"description\">{{ confirm.description }}</div>\n            }\n            <!-- DATA -->\n            @if (confirm.data) {\n            <div class=\"data\">\n                <div class=\"title\">{{ confirm.data.title }}:</div>\n                <div class=\"value\">{{ confirm.data.value }}</div>\n            </div>\n            }\n        </div>\n    </content>\n</mat-dialog-content>\n<mat-dialog-actions [align]=\"'end'\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</mat-dialog-actions>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'confirm-dialog' }, imports: [NgClass, MatButtonModule, MatDialogModule, MatIconModule], template: "<mat-dialog-content>\n    <content>\n        <!-- ICON -->\n        @if (confirm.icon) {\n        <div class=\"icon\">\n            <mat-icon>{{ confirm.icon }}</mat-icon>\n        </div>\n        }\n\n        <!-- CONTENT -->\n        <div class=\"content\">\n            <div class=\"question\">{{ confirm.question }}</div>\n            <!-- DESCRIPTION -->\n            @if (confirm.description) {\n            <div class=\"description\">{{ confirm.description }}</div>\n            }\n            <!-- DATA -->\n            @if (confirm.data) {\n            <div class=\"data\">\n                <div class=\"title\">{{ confirm.data.title }}:</div>\n                <div class=\"value\">{{ confirm.data.value }}</div>\n            </div>\n            }\n        </div>\n    </content>\n</mat-dialog-content>\n<mat-dialog-actions [align]=\"'end'\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</mat-dialog-actions>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}\n"] }]
+        }] });
+
+class ConfirmBottomSheetComponent {
+    matBottomSheetRef;
+    confirm = inject(MAT_BOTTOM_SHEET_DATA);
+    constructor(matBottomSheetRef) {
+        this.matBottomSheetRef = matBottomSheetRef;
+    }
+    close(confirmed) {
+        this.matBottomSheetRef.dismiss(confirmed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" } }, ngImport: i0, template: "<content>\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <div class=\"icon\">\n        <mat-icon>{{ confirm.icon }}</mat-icon>\n    </div>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"content\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</content>\n\n<div class=\"buttons\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin:1rem 0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<content>\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <div class=\"icon\">\n        <mat-icon>{{ confirm.icon }}</mat-icon>\n    </div>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"content\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</content>\n\n<div class=\"buttons\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["content{display:flex;align-items:flex-start;column-gap:1rem;padding-top:1rem}content .icon mat-icon{font-size:200%}content .content{flex:1}content .content .question{text-align:justify}content .content .description{font-size:90%;margin-top:.5rem;text-align:justify}content .content .data{display:flex;align-items:center;column-gap:.5rem;font-size:90%;margin-top:1rem}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin:1rem 0 .5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }] });
+
+class NgxHelperConfirmCalss {
+    matBottomSheet;
+    matDialog;
+    confirm;
+    constructor(matBottomSheet, matDialog, confirm) {
+        this.matBottomSheet = matBottomSheet;
+        this.matDialog = matDialog;
+        this.confirm = confirm;
+    }
+    dialog(onConfirmed, arg1, arg2) {
+        const onDenied = typeof arg1 === 'function' ? arg1 : undefined;
+        const config = arg2 || (typeof arg1 !== 'function' ? arg1 : {});
+        this.matDialog
+            .open(ConfirmDialogComponent, {
+            // DEFAULT CONFIG
+            width: 'calc(100vw - 4rem)',
+            direction: 'rtl',
+            enterAnimationDuration: '100ms',
+            exitAnimationDuration: '100ms',
+            // OVERWRITE CONFIG
+            ...config,
+            maxHeight: '80vh',
+            // DATA
+            data: this.confirm,
+        })
+            .afterClosed()
+            .subscribe({ next: (confirmed) => (!!confirmed ? onConfirmed() : onDenied ? onDenied() : undefined) });
+    }
+    bottomSheet(onConfirmed, arg1, arg2) {
+        const onDenied = typeof arg1 === 'function' ? arg1 : undefined;
+        const config = arg2 || (typeof arg1 !== 'function' ? arg1 : {});
+        this.matBottomSheet
+            .open(ConfirmBottomSheetComponent, {
+            // DEFAULT CONFIG
+            direction: 'rtl',
+            // OVERWRITE CONFIG
+            ...config,
+            maxHeight: '80vh',
+            // DATA
+            data: this.confirm,
+        })
+            .afterDismissed()
+            .subscribe({ next: (confirmed) => (!!confirmed ? onConfirmed() : onDenied ? onDenied() : undefined) });
+    }
+}
+class NgxHelperConfirmService {
+    matBottomSheet;
+    matDialog;
+    constructor(matBottomSheet, matDialog) {
+        this.matBottomSheet = matBottomSheet;
+        this.matDialog = matDialog;
+    }
+    verify(confirm) {
+        return new NgxHelperConfirmCalss(this.matBottomSheet, this.matDialog, confirm);
+    }
+    active(data, config) {
+        return this.verify({
+            question: `آیا می‌خواهید ${data.title} انتخاب شده را فعال کنید؟`,
+            description: config?.description,
+            data: data.value ? { title: data.title, value: data.value } : undefined,
+            icon: 'check_box',
+            confirmClass: config?.confirmClass,
+            denyClass: config?.denyClass,
+        });
+    }
+    deactive(data, config) {
+        return this.verify({
+            question: `آیا می‌خواهید ${data.title} انتخاب شده را غیرفعال کنید؟`,
+            description: config?.description,
+            data: data.value ? { title: data.title, value: data.value } : undefined,
+            icon: 'disabled_by_default',
+            confirmClass: config?.confirmClass || 'error',
+            denyClass: config?.denyClass,
+        });
+    }
+    status(active, data, config) {
+        return active ? this.active(data, config || {}) : this.deactive(data, config || {});
+    }
+    delete(data, config) {
+        return this.verify({
+            question: `آیا می‌خواهید ${data.title} انتخاب شده را حذف کنید؟`,
+            description: config?.description,
+            data: data.value ? { title: data.title, value: data.value } : undefined,
+            icon: 'delete',
+            confirmClass: config?.confirmClass || 'error',
+            denyClass: config?.denyClass,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2.MatDialog }] });
+
+const NGX_HELPER_CONTAINER_TYPE = new InjectionToken('NGX-HELPER-CONTAINER-TYPE');
+const NGX_HELPER_CONTAINER_DATA = new InjectionToken('NGX-HELPER-CONTAINER-DATA');
+const NGX_HELPER_CONTAINER_CLOSE = new InjectionToken('NGX-HELPER-CONTAINER-CLOSE');
+
+class ContainerDialogComponent {
+    matDialogRef;
+    container = inject(MAT_DIALOG_DATA);
+    injector;
+    constructor(matDialogRef) {
+        this.matDialogRef = matDialogRef;
+    }
+    ngOnInit() {
+        this.injector = Injector.create({
+            providers: [
+                { provide: NGX_HELPER_CONTAINER_TYPE, useValue: 'DIALOG' },
+                { provide: NGX_HELPER_CONTAINER_DATA, useValue: this.container.config.data },
+                {
+                    provide: NGX_HELPER_CONTAINER_CLOSE,
+                    useFactory: () => (response) => this.matDialogRef.close(response),
+                },
+            ],
+        });
+    }
+    close() {
+        this.matDialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" } }, ngImport: i0, template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 50px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'container-dialog' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 50px);overflow:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i2.MatDialogRef }] });
+
+class ContainerBottomSheetComponent {
+    matBottomSheetRef;
+    container = inject(MAT_BOTTOM_SHEET_DATA);
+    injector;
+    constructor(matBottomSheetRef) {
+        this.matBottomSheetRef = matBottomSheetRef;
+    }
+    ngOnInit() {
+        this.injector = Injector.create({
+            providers: [
+                { provide: NGX_HELPER_CONTAINER_TYPE, useValue: 'BOTTOMSHEET' },
+                { provide: NGX_HELPER_CONTAINER_DATA, useValue: this.container.config.data },
+                {
+                    provide: NGX_HELPER_CONTAINER_CLOSE,
+                    useFactory: () => (response) => this.matBottomSheetRef.dismiss(response),
+                },
+            ],
+        });
+    }
+    close() {
+        this.matBottomSheetRef.dismiss();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" } }, ngImport: i0, template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content>\n    <div [style.padding]=\"container.config.padding || '1rem'\">\n        <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n    </div>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 51px);overflow:auto}::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n    }\n</header>\n<content>\n    <div [style.padding]=\"container.config.padding || '1rem'\">\n        <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n    </div>\n</content>\n", styles: ["header{display:flex;align-items:center;height:50px;line-height:50px;font-size:110%;padding:0 .5rem;border-bottom:1px solid var(--outline-variant)}header .title{flex:1;padding-right:.5rem}content{display:block;max-height:calc(80vh - 51px);overflow:auto}::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }] });
+
+class NgxHelperContainerCalss {
+    matBottomSheet;
+    matDialog;
+    container;
+    constructor(matBottomSheet, matDialog, container) {
+        this.matBottomSheet = matBottomSheet;
+        this.matDialog = matDialog;
+        this.container = container;
+    }
+    dialog(arg1, arg2, arg3) {
+        const onResponse = typeof arg1 === 'function' ? arg1 : undefined;
+        const onDismiss = typeof arg2 === 'function' ? arg2 : undefined;
+        const config = arg3 || (typeof arg2 !== 'function' ? arg2 : {});
+        this.matDialog
+            .open(ContainerDialogComponent, {
+            // DEFAULT CONFIG
+            width: 'calc(100vw - 4rem)',
+            direction: 'rtl',
+            enterAnimationDuration: '100ms',
+            exitAnimationDuration: '100ms',
+            // OVERWRITE CONFIG
+            ...config,
+            maxHeight: '80vh',
+            // DATA
+            data: this.container,
+        })
+            .afterClosed()
+            .subscribe({
+            next: (response) => {
+                if (onResponse && !!response)
+                    onResponse(response);
+                if (onDismiss && !response)
+                    onDismiss();
+            },
+        });
+    }
+    bottomSheet(arg1, arg2, arg3) {
+        const onResponse = typeof arg1 === 'function' ? arg1 : undefined;
+        const onDismiss = typeof arg2 === 'function' ? arg2 : undefined;
+        const config = arg3 || (typeof arg2 !== 'function' ? arg2 : {});
+        this.matBottomSheet
+            .open(ContainerBottomSheetComponent, {
+            // DEFAULT CONFIG
+            direction: 'rtl',
+            panelClass: 'ngx-helper-bottom-sheet',
+            // OVERWRITE CONFIG
+            ...config,
+            maxHeight: '80vh',
+            // DATA
+            data: this.container,
+        })
+            .afterDismissed()
+            .subscribe({
+            next: (response) => {
+                if (onResponse && !!response)
+                    onResponse(response);
+                if (onDismiss && !response)
+                    onDismiss();
+            },
+        });
+    }
+}
+class NgxHelperContainerService {
+    matBottomSheet;
+    matDialog;
+    constructor(matBottomSheet, matDialog) {
+        this.matBottomSheet = matBottomSheet;
+        this.matDialog = matDialog;
+    }
+    init(component, title, arg1) {
+        const config = arg1 || {};
+        return new NgxHelperContainerCalss(this.matBottomSheet, this.matDialog, { component, title, config });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2.MatDialog }] });
+
 /*
  * Public API Surface of ngx-helper-m3
  */
@@ -580,5 +889,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NgxHelperBankCardPipe, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperVolumePipe, NgxHelperWeightPipe };
+export { NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_INDEX, NGX_HELPER_PAGE_GROUP_TITLE, NgxHelperBankCardPipe, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map