@webilix/ngx-helper-m3 0.0.14 → 0.0.16

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, Directive, HostListener, createComponent } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, HostListener, createComponent, Directive } from '@angular/core';
 import { NgComponentOutlet, NgClass } from '@angular/common';
-import * as i1$2 from '@angular/material/button';
+import * as i1$1 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import { MatDivider } from '@angular/material/divider';
 import * as i3$1 from '@angular/material/icon';
@@ -13,14 +13,14 @@ 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 * 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 * as i1$2 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$4 from '@angular/common/http';
 import { HttpHeaders, HttpEventType } from '@angular/common/http';
+import * as i1$3 from '@angular/platform-browser';
 
 const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
 const provideNgxHelperConfig = (config) => {
@@ -449,11 +449,11 @@ class NgxHelperCardComponent {
         this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCardComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\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.5", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-helper-card', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule], providers: [ComponentService], template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
+            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\" [xPosition]=\"'before'\">\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
                 }, {
@@ -715,71 +715,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: [{ required: false }]
             }] } });
 
-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;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionStickyDirective, deps: [{ token: i0.ElementRef }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionStickyDirective, isStandalone: true, selector: "[ngxHelperSectionSticky]", inputs: { ngxHelperSectionSticky: "ngxHelperSectionSticky", ngxHelperSectionZIndex: "ngxHelperSectionZIndex" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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 NgxHelperSectionComponent {
     componentService;
     config;
@@ -819,27 +754,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class NgxHelperSectionColumnComponent {
+    componentService;
+    config;
     flexStyle = '1';
     widthStyle = '*';
+    stickyPosition;
+    stickyZIndex;
+    stickyTop;
     flex;
     width;
     sticky;
+    zIndex;
+    componentConfig;
+    isMobile = false;
+    constructor(componentService, config) {
+        this.componentService = componentService;
+        this.config = config;
+    }
     ngOnChanges(changes) {
         this.flexStyle = this.width ? 'unset' : this.flex?.toString() || '1';
         this.widthStyle = this.width || '*';
+        this.componentConfig = this.componentService.getComponentConfig(this.config);
+        this.onResize();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionColumnComponent, isStandalone: true, selector: "ngx-helper-section-column", inputs: { flex: "flex", width: "width", sticky: "sticky" }, host: { properties: { "style.flex": "this.flexStyle", "style.width": "this.widthStyle" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    onResize() {
+        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
+        this.setPosition();
+    }
+    setPosition() {
+        const top = this.componentConfig.stickyView?.top;
+        if (!top)
+            return;
+        const sticky = this.sticky === true ||
+            (this.sticky === 'DESKTOP' && !this.isMobile) ||
+            (this.sticky === 'MOBILE' && this.isMobile);
+        this.stickyPosition = sticky ? 'sticky' : 'static';
+        this.stickyZIndex = sticky ? (this.zIndex ? this.zIndex.toString() : '1') : 'auto';
+        this.stickyTop = sticky ? (this.isMobile ? top.mobileView : top.desktopView) : 'auto';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionColumnComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperSectionColumnComponent, isStandalone: true, selector: "ngx-helper-section-column", inputs: { flex: "flex", width: "width", sticky: "sticky", zIndex: "zIndex" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.flex": "this.flexStyle", "style.width": "this.widthStyle", "style.position": "this.stickyPosition", "style.zInde": "this.stickyZIndex", "style.top": "this.stickyTop" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSectionColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-helper-section-column', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { flexStyle: [{
+            args: [{ selector: 'ngx-helper-section-column', host: { '(window:resize)': 'onResize($event)' }, imports: [], template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { flexStyle: [{
                 type: HostBinding,
                 args: ['style.flex']
             }], widthStyle: [{
                 type: HostBinding,
                 args: ['style.width']
+            }], stickyPosition: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], stickyZIndex: [{
+                type: HostBinding,
+                args: ['style.zInde']
+            }], stickyTop: [{
+                type: HostBinding,
+                args: ['style.top']
             }], flex: [{
                 type: Input,
                 args: [{ required: false }]
@@ -849,6 +827,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], sticky: [{
                 type: Input,
                 args: [{ required: false }]
+            }], zIndex: [{
+                type: Input,
+                args: [{ required: false }]
             }] } });
 
 class NgxHelperValueBoxComponent {
@@ -1007,60 +988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: [{ required: false }]
             }] } });
 
-class NgxHelperMultiLinePipe {
-    domSanitizer;
-    constructor(domSanitizer) {
-        this.domSanitizer = domSanitizer;
-    }
-    transform(value, options) {
-        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
-            return '';
-        return options?.html
-            ? this.domSanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
-            : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, isStandalone: true, name: "ngxHelperMultiLine" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperMultiLine' }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
-
-class NgxHelperSafePipe {
-    domSanitizer;
-    constructor(domSanitizer) {
-        this.domSanitizer = domSanitizer;
-    }
-    transform(value, options) {
-        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
-            return '';
-        switch (options?.type || 'HTML') {
-            case 'STYLE':
-                return this.domSanitizer.bypassSecurityTrustStyle(value);
-            case 'SCRIPT':
-                return this.domSanitizer.bypassSecurityTrustScript(value);
-            case 'URL':
-                return this.domSanitizer.bypassSecurityTrustUrl(value);
-            case 'RESOURCE_URL':
-                return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
-            case 'HTML':
-                return this.domSanitizer.bypassSecurityTrustHtml(value);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, isStandalone: true, name: "ngxHelperSafe" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngxHelperSafe' }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
-
 class ConfirmDialogComponent {
     className = 'ngx-helper-m3-confirm';
     confirm = inject(MAT_DIALOG_DATA);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1080,13 +1012,13 @@ class ConfirmBottomSheetComponent {
     close(confirmed) {
         this.matBottomSheetRef.dismiss(confirmed);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$2.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<div class=\"confirm-content\">\n    <!-- ICON -->\n    @if (confirm.icon) {\n    <mat-icon>{{ confirm.icon }}</mat-icon>\n    }\n\n    <!-- CONTENT -->\n    <div class=\"confirm\">\n        <div class=\"question\">{{ confirm.question }}</div>\n        <!-- DESCRIPTION -->\n        @if (confirm.description) {\n        <div class=\"description\">{{ confirm.description }}</div>\n        }\n        <!-- DATA -->\n        @if (confirm.data) {\n        <div class=\"data\">\n            <div class=\"title\">{{ confirm.data.title }}:</div>\n            <div class=\"value\">{{ confirm.data.value }}</div>\n        </div>\n        }\n    </div>\n</div>\n\n<div class=\"confirm-footer\">\n    <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n    <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
+        }], ctorParameters: () => [{ type: i1$2.MatBottomSheetRef }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
             }] } });
@@ -1180,13 +1112,13 @@ class NgxHelperConfirmService {
             denyClass: config?.denyClass,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$2.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
+        }], ctorParameters: () => [{ type: i1$2.MatBottomSheet }, { type: i2$1.MatDialog }] });
 
 const NGX_HELPER_CONTAINER_TYPE = new InjectionToken('NGX-HELPER-CONTAINER-TYPE');
 const NGX_HELPER_CONTAINER_DATA = new InjectionToken('NGX-HELPER-CONTAINER-DATA');
@@ -1249,13 +1181,13 @@ class ContainerBottomSheetComponent {
     close() {
         this.matBottomSheetRef.dismiss();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$2.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<div class=\"container-header\">\n    <div class=\"title\">{{ container.title }}</div>\n    @if (!container.config.hideClose) {\n    <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </button>\n    }\n</div>\n\n<div class=\"container-content\" [style.padding]=\"container.config.padding || '1rem'\">\n    <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</div>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
+        }], ctorParameters: () => [{ type: i1$2.MatBottomSheetRef }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
             }] } });
@@ -1333,13 +1265,33 @@ class NgxHelperContainerService {
         const config = arg1 || {};
         return new NgxHelperContainerCalss(this.matBottomSheet, this.matDialog, { component, title, config });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$2.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperContainerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
+        }], ctorParameters: () => [{ type: i1$2.MatBottomSheet }, { type: i2$1.MatDialog }] });
+
+class NgxHelperMultiLinePipe {
+    domSanitizer;
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        return options?.html
+            ? this.domSanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
+            : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, isStandalone: true, name: "ngxHelperMultiLine" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperMultiLine' }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
 
 class ToastComponent {
     elementRef;
@@ -1867,6 +1819,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: NgxHelperToastService }] });
 
+class NgxHelperStickyDirective {
+    elementRef;
+    config;
+    ngxHelperSticky;
+    stickyIn = 'ALWAYS';
+    zIndex;
+    mobileWidth;
+    stickyView;
+    isMobile = false;
+    constructor(elementRef, config) {
+        this.elementRef = elementRef;
+        this.config = config;
+    }
+    ngOnInit() {
+        const getStickyView = (config) => {
+            return {
+                desktopView: typeof config === 'string' ? config : config.desktopView,
+                mobileView: typeof config === 'string' ? config : config.mobileView,
+            };
+        };
+        (this.mobileWidth = this.config?.mobileWidth || 600),
+            (this.stickyView = {
+                top: this.config?.stickyView?.top ? getStickyView(this.config.stickyView.top) : undefined,
+                bottom: this.config?.stickyView?.bottom ? getStickyView(this.config.stickyView.bottom) : undefined,
+            });
+        this.onResize();
+    }
+    onResize() {
+        this.isMobile = window.innerWidth <= this.mobileWidth;
+        this.setPosition();
+    }
+    setPosition() {
+        const element = this.elementRef.nativeElement;
+        if (!element)
+            return;
+        const sticky = this.stickyIn === 'ALWAYS' ||
+            (this.stickyIn === 'DESKTOP' && !this.isMobile) ||
+            (this.stickyIn === 'MOBILE' && this.isMobile);
+        switch (this.ngxHelperSticky) {
+            case 'TOP':
+                const top = this.stickyView.top;
+                if (!top)
+                    return;
+                element.style.position = sticky ? 'sticky' : 'static';
+                element.style.zIndex = sticky ? (this.zIndex ? this.zIndex.toString() : '1') : 'auto';
+                element.style.top = sticky ? (this.isMobile ? top.mobileView : top.desktopView) : 'auto';
+                break;
+            case 'BOTTOM':
+                const bottom = this.stickyView.bottom;
+                if (!bottom)
+                    return;
+                element.style.position = sticky ? 'sticky' : 'static';
+                element.style.zIndex = sticky ? (this.zIndex ? this.zIndex.toString() : '1') : 'auto';
+                element.style.bottom = sticky ? (this.isMobile ? bottom.mobileView : bottom.desktopView) : 'auto';
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperStickyDirective, deps: [{ token: i0.ElementRef }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: NgxHelperStickyDirective, isStandalone: true, selector: "[ngxHelperSticky]", inputs: { ngxHelperSticky: "ngxHelperSticky", stickyIn: "stickyIn", zIndex: "zIndex" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperStickyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxHelperSticky]',
+                    host: { '(window:resize)': 'onResize($event)' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_HELPER_CONFIG]
+                }] }], propDecorators: { ngxHelperSticky: [{
+                type: Input,
+                args: [{ required: true }]
+            }], stickyIn: [{
+                type: Input,
+                args: [{ required: false }]
+            }], zIndex: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+class NgxHelperSafePipe {
+    domSanitizer;
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    transform(value, options) {
+        if (value === undefined || value === null || !Helper.IS.string(value) || value === '')
+            return '';
+        switch (options?.type || 'HTML') {
+            case 'STYLE':
+                return this.domSanitizer.bypassSecurityTrustStyle(value);
+            case 'SCRIPT':
+                return this.domSanitizer.bypassSecurityTrustScript(value);
+            case 'URL':
+                return this.domSanitizer.bypassSecurityTrustUrl(value);
+            case 'RESOURCE_URL':
+                return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
+            case 'HTML':
+                return this.domSanitizer.bypassSecurityTrustHtml(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, isStandalone: true, name: "ngxHelperSafe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxHelperSafe' }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
+
 /*
  * Public API Surface of ngx-helper-m3
  */
@@ -1875,5 +1938,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGX_HELPER_BOX_DATA, NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_DATA_CHANGE, NGX_HELPER_PAGE_GROUP_ITEM, NgxHelperBankCardPipe, NgxHelperBoxComponent, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperHttpService, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperToastService, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
+export { NGX_HELPER_BOX_DATA, NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_DATA_CHANGE, NGX_HELPER_PAGE_GROUP_ITEM, NgxHelperBankCardPipe, NgxHelperBoxComponent, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperHttpService, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperStickyDirective, NgxHelperToastService, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map