@webilix/ngx-helper-m3 0.0.15 → 0.0.17

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, createComponent, HostListener, 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,22 @@ 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 { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
+import { Map, View, Feature } from 'ol';
+import { Point } from 'ol/geom';
+import interactionDoubleClickZoom from 'ol/interaction/DoubleClickZoom';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import OSM from 'ol/source/OSM';
+import VectorSource from 'ol/source/Vector';
 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 +457,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 +723,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 +762,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 +835,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 +996,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 +1020,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 +1120,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 +1189,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 +1273,213 @@ 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 GetComponent {
+    coordinates;
+    config;
+    close;
+    map;
+    coordinate = [];
+    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    ngOnInit() {
+        this.coordinate = this.coordinates
+            ? [this.coordinates.longitude, this.coordinates.latitude]
+            : this.config?.view
+                ? [this.config.view.longitude, this.config.view.latitude]
+                : [51.3380603, 35.6997382];
+        const zoom = this.config?.zoom || 15;
+        this.map = new Map({
+            view: new View({ center: this.coordinate, zoom, projection: 'EPSG:4326' }),
+            layers: [new TileLayer({ source: new OSM() })],
+            target: 'ngx-helper-m3-coordinates-map',
+        });
+        this.map
+            .getInteractions()
+            .getArray()
+            .forEach((interaction) => {
+            if (interaction instanceof interactionDoubleClickZoom)
+                this.map.removeInteraction(interaction);
+        });
+        this.addLayer();
+    }
+    addLayer() {
+        this.map
+            .getLayers()
+            .getArray()
+            .forEach((layer) => {
+            if (layer instanceof VectorLayer)
+                this.map.removeLayer(layer);
+        });
+        if (this.coordinates) {
+            const size = this.config?.size || 8;
+            const color = this.config?.color || 'rgb(42, 101, 126)';
+            const point = new Point(this.coordinate);
+            const layer = new VectorLayer({
+                source: new VectorSource({ features: [new Feature(point)] }),
+                style: {
+                    'circle-fill-color': color,
+                    'circle-radius': size,
+                    'circle-stroke-color': '#FFF',
+                    'circle-stroke-width': 1,
+                },
+            });
+            this.map.addLayer(layer);
+        }
+    }
+    checkInputs(latitude, longitude) {
+        this.coordinates = undefined;
+        this.addLayer();
+        latitude = latitude.toString().trim();
+        if (latitude === '' || isNaN(+latitude) || +latitude < -180 || +latitude > 180)
+            return;
+        longitude = longitude.toString().trim();
+        if (longitude === '' || isNaN(+longitude) || +longitude < -180 || +longitude > 180)
+            return;
+        const center = [+longitude, +latitude];
+        this.map.getView().animate({ center, duration: 1000 });
+        this.coordinate = [+longitude, +latitude];
+        this.coordinates = { latitude: +latitude, longitude: +longitude };
+        this.addLayer();
+    }
+    selectCoordinates() {
+        if (!this.coordinates)
+            return;
+        this.close(this.coordinates);
+    }
+    setCoordinates(event) {
+        event.preventDefault();
+        this.coordinate = this.map.getEventCoordinate(event).map((c) => +c.toFixed(7));
+        this.coordinates = { latitude: this.coordinate[1], longitude: this.coordinate[0] };
+        this.addLayer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" } }, providers: [provideNgxMask()], ngImport: i0, template: "<div\n    id=\"ngx-helper-m3-coordinates-map\"\n    class=\"map\"\n    (dblclick)=\"setCoordinates($event)\"\n    (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"coordinates\">\n    <div class=\"header\">\n        <div class=\"title\">COORDINATES</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LATITUDE</div>\n        <input\n            type=\"text\"\n            maxlength=\"15\"\n            inputmode=\"numeric\"\n            [value]=\"coordinate[1] || ''\"\n            mask=\"separator.12\"\n            thousandSeparator=\"\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (keyup.enter)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            (blur)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            #latitudeInput\n        />\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LONGITUDE</div>\n        <input\n            type=\"text\"\n            maxlength=\"15\"\n            inputmode=\"numeric\"\n            [value]=\"coordinate[0] || ''\"\n            mask=\"separator.12\"\n            thousandSeparator=\"\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (keyup.enter)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            (blur)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            #longitudeInput\n        />\n    </div>\n    <div class=\"buttons\">\n        <mat-icon [class.disabled]=\"!coordinates\" (click)=\"selectCoordinates()\">done_all</mat-icon>\n    </div>\n</div>\n", styles: [":host{display:block;z-index:1000;position:fixed;inset:0}:host .map{width:100vw;height:100vh;background-color:#fff}:host .coordinates{position:absolute;bottom:0;left:0;padding:.5rem .5rem .75rem;background-color:#fff;box-shadow:0 0 5px 0 var(--primary)}:host .coordinates .header{display:flex;align-items:center;column-gap:1rem;padding:.5rem 1rem;color:var(--on-primary);background-color:var(--primary)}:host .coordinates .header .title{flex:1;font-size:90%;font-weight:500;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .header mat-icon{cursor:pointer;font-size:110%;color:var(--on-primary)}:host .coordinates .item{display:flex;align-items:center;column-gap:1rem;padding:.75rem 1rem 0;color:#000}:host .coordinates .item .title{flex:1;font-size:90%;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item input{direction:ltr;text-align:left;outline:none;width:125px;font-size:90%;padding:.25rem;border-radius:4px;color:#000;border:1px solid rgb(200,200,200);font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .buttons{display:flex;justify-content:right;margin-top:.5rem;padding-right:1rem}:host .coordinates .buttons mat-icon{cursor:pointer;font-size:110%;color:#000}:host .coordinates .buttons mat-icon.disabled{opacity:.4}\n"], dependencies: [{ kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { 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: GetComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'get' }, imports: [NgxMaskDirective, MatIcon], providers: [provideNgxMask()], template: "<div\n    id=\"ngx-helper-m3-coordinates-map\"\n    class=\"map\"\n    (dblclick)=\"setCoordinates($event)\"\n    (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"coordinates\">\n    <div class=\"header\">\n        <div class=\"title\">COORDINATES</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LATITUDE</div>\n        <input\n            type=\"text\"\n            maxlength=\"15\"\n            inputmode=\"numeric\"\n            [value]=\"coordinate[1] || ''\"\n            mask=\"separator.12\"\n            thousandSeparator=\"\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (keyup.enter)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            (blur)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            #latitudeInput\n        />\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LONGITUDE</div>\n        <input\n            type=\"text\"\n            maxlength=\"15\"\n            inputmode=\"numeric\"\n            [value]=\"coordinate[0] || ''\"\n            mask=\"separator.12\"\n            thousandSeparator=\"\"\n            decimalMarker=\".\"\n            [allowNegativeNumbers]=\"true\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (keyup.enter)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            (blur)=\"checkInputs(latitudeInput.value, longitudeInput.value)\"\n            #longitudeInput\n        />\n    </div>\n    <div class=\"buttons\">\n        <mat-icon [class.disabled]=\"!coordinates\" (click)=\"selectCoordinates()\">done_all</mat-icon>\n    </div>\n</div>\n", styles: [":host{display:block;z-index:1000;position:fixed;inset:0}:host .map{width:100vw;height:100vh;background-color:#fff}:host .coordinates{position:absolute;bottom:0;left:0;padding:.5rem .5rem .75rem;background-color:#fff;box-shadow:0 0 5px 0 var(--primary)}:host .coordinates .header{display:flex;align-items:center;column-gap:1rem;padding:.5rem 1rem;color:var(--on-primary);background-color:var(--primary)}:host .coordinates .header .title{flex:1;font-size:90%;font-weight:500;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .header mat-icon{cursor:pointer;font-size:110%;color:var(--on-primary)}:host .coordinates .item{display:flex;align-items:center;column-gap:1rem;padding:.75rem 1rem 0;color:#000}:host .coordinates .item .title{flex:1;font-size:90%;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item input{direction:ltr;text-align:left;outline:none;width:125px;font-size:90%;padding:.25rem;border-radius:4px;color:#000;border:1px solid rgb(200,200,200);font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .buttons{display:flex;justify-content:right;margin-top:.5rem;padding-right:1rem}:host .coordinates .buttons mat-icon{cursor:pointer;font-size:110%;color:#000}:host .coordinates .buttons mat-icon.disabled{opacity:.4}\n"] }]
+        }] });
+
+class ShowComponent {
+    coordinates;
+    config;
+    close;
+    map;
+    copied;
+    copyTimeout;
+    ngOnInit() {
+        const coordinate = [this.coordinates.longitude, this.coordinates.latitude];
+        const point = new Point(coordinate);
+        const zoom = this.config?.zoom || 15;
+        const size = this.config?.size || 8;
+        const color = this.config?.color || 'rgb(42, 101, 126)';
+        this.map = new Map({
+            view: new View({ center: coordinate, zoom, projection: 'EPSG:4326' }),
+            layers: [
+                new TileLayer({ source: new OSM() }),
+                new VectorLayer({
+                    source: new VectorSource({ features: [new Feature(point)] }),
+                    style: {
+                        'circle-fill-color': color,
+                        'circle-radius': size,
+                        'circle-stroke-color': '#FFF',
+                        'circle-stroke-width': 1,
+                    },
+                }),
+            ],
+            target: 'ngx-helper-m3-coordinates-map',
+        });
+    }
+    setCopy(type) {
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+        this.copied = type;
+        this.copyTimeout = setTimeout(() => (this.copied = undefined), 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ShowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" } }, ngImport: i0, template: "<div id=\"ngx-helper-m3-coordinates-map\" class=\"map\"></div>\n\n<div class=\"coordinates\">\n    <div class=\"header\">\n        <div class=\"title\">COORDINATES</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LATITUDE</div>\n        <div class=\"value\">{{ coordinates.latitude.toFixed(7) }}</div>\n        <mat-icon [cdkCopyToClipboard]=\"coordinates.latitude.toString()\" (click)=\"setCopy('LATITUDE')\">\n            {{ copied === 'LATITUDE' ? 'done_all' : 'copy' }}\n        </mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LONGITUDE</div>\n        <div class=\"value\">{{ coordinates.longitude.toFixed(7) }}</div>\n        <mat-icon [cdkCopyToClipboard]=\"coordinates.longitude.toString()\" (click)=\"setCopy('LONGITUDE')\">\n            {{ copied === 'LONGITUDE' ? 'done_all' : 'copy' }}\n        </mat-icon>\n    </div>\n</div>\n", styles: [":host{display:block;z-index:1000;position:fixed;inset:0}:host .map{width:100vw;height:100vh;background-color:#fff}:host .coordinates{position:absolute;bottom:0;left:0;padding:.5rem .5rem .75rem;background-color:#fff;box-shadow:0 0 5px 0 var(--primary)}:host .coordinates .header{display:flex;align-items:center;column-gap:1rem;padding:.5rem 1rem;color:var(--on-primary);background-color:var(--primary)}:host .coordinates .header .title{flex:1;font-size:90%;font-weight:500;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .header mat-icon{cursor:pointer;font-size:110%;color:var(--on-primary)}:host .coordinates .item{display:flex;align-items:center;column-gap:1rem;padding:.75rem 1rem 0;color:#000}:host .coordinates .item .title{font-size:90%;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item .value{flex:1;font-size:95%;text-align:right;padding-right:1rem;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item mat-icon{cursor:pointer;font-size:100%;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ShowComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'show' }, imports: [ClipboardModule, MatIcon], template: "<div id=\"ngx-helper-m3-coordinates-map\" class=\"map\"></div>\n\n<div class=\"coordinates\">\n    <div class=\"header\">\n        <div class=\"title\">COORDINATES</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LATITUDE</div>\n        <div class=\"value\">{{ coordinates.latitude.toFixed(7) }}</div>\n        <mat-icon [cdkCopyToClipboard]=\"coordinates.latitude.toString()\" (click)=\"setCopy('LATITUDE')\">\n            {{ copied === 'LATITUDE' ? 'done_all' : 'copy' }}\n        </mat-icon>\n    </div>\n    <div class=\"item\">\n        <div class=\"title\">LONGITUDE</div>\n        <div class=\"value\">{{ coordinates.longitude.toFixed(7) }}</div>\n        <mat-icon [cdkCopyToClipboard]=\"coordinates.longitude.toString()\" (click)=\"setCopy('LONGITUDE')\">\n            {{ copied === 'LONGITUDE' ? 'done_all' : 'copy' }}\n        </mat-icon>\n    </div>\n</div>\n", styles: [":host{display:block;z-index:1000;position:fixed;inset:0}:host .map{width:100vw;height:100vh;background-color:#fff}:host .coordinates{position:absolute;bottom:0;left:0;padding:.5rem .5rem .75rem;background-color:#fff;box-shadow:0 0 5px 0 var(--primary)}:host .coordinates .header{display:flex;align-items:center;column-gap:1rem;padding:.5rem 1rem;color:var(--on-primary);background-color:var(--primary)}:host .coordinates .header .title{flex:1;font-size:90%;font-weight:500;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .header mat-icon{cursor:pointer;font-size:110%;color:var(--on-primary)}:host .coordinates .item{display:flex;align-items:center;column-gap:1rem;padding:.75rem 1rem 0;color:#000}:host .coordinates .item .title{font-size:90%;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item .value{flex:1;font-size:95%;text-align:right;padding-right:1rem;font-family:Roboto,Helvetica Neue,sans-serif}:host .coordinates .item mat-icon{cursor:pointer;font-size:100%;color:#000}\n"] }]
+        }] });
+
+class NgxHelperCoordinatesService {
+    applicationRef;
+    injector;
+    constructor(applicationRef, injector) {
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+    }
+    get(arg1, arg2) {
+        const coordinates = arg1 ? ('latitude' in arg1 ? arg1 : undefined) : undefined;
+        const config = arg2 || (arg1 && !coordinates ? arg1 : undefined);
+        return new Promise((resolve, reject) => {
+            const componentRef = createComponent(GetComponent, {
+                environmentInjector: this.applicationRef.injector,
+                elementInjector: this.injector,
+            });
+            componentRef.instance.coordinates = coordinates;
+            componentRef.instance.config = config;
+            componentRef.instance.close = (coordinates) => {
+                this.applicationRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                coordinates ? resolve(coordinates) : reject();
+            };
+            const htmlElement = componentRef.hostView.rootNodes[0];
+            this.applicationRef.attachView(componentRef.hostView);
+            document.body.appendChild(htmlElement);
+        });
+    }
+    show(coordinates, config) {
+        const componentRef = createComponent(ShowComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        componentRef.instance.coordinates = coordinates;
+        componentRef.instance.config = config;
+        componentRef.instance.close = () => {
+            this.applicationRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        };
+        const htmlElement = componentRef.hostView.rootNodes[0];
+        this.applicationRef.attachView(componentRef.hostView);
+        document.body.appendChild(htmlElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCoordinatesService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCoordinatesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCoordinatesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+
+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 +2007,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 +2126,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, NgxHelperCoordinatesService, 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