@webilix/ngx-helper-m3 0.0.29 → 0.0.31

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, Injector, Input, HostBinding, Component, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, createComponent, HostListener, Directive } from '@angular/core';
-import { NgComponentOutlet, NgClass } from '@angular/common';
+import { NgComponentOutlet, NgClass, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import { MatDivider } from '@angular/material/divider';
@@ -21,7 +21,7 @@ import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { Map, View, Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point, LineString } from 'ol/geom';
 import interactionDoubleClickZoom from 'ol/interaction/DoubleClickZoom';
 import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
@@ -31,6 +31,8 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$5 from '@angular/common/http';
 import { HttpHeaders, HttpEventType } from '@angular/common/http';
 import * as i1$4 from '@angular/platform-browser';
+import * as i1$6 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
 const provideNgxHelperConfig = (config) => {
@@ -1336,7 +1338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.MatBottomSheet }, { type: i2$1.MatDialog }] });
 
-class GetComponent {
+let GetComponent$1 = class GetComponent {
     className = 'ngx-helper-m3-coordinates';
     coordinates;
     config;
@@ -1415,18 +1417,26 @@ class GetComponent {
         this.coordinates = { latitude: this.coordinate[1], longitude: this.coordinate[0] };
         this.addLayer();
     }
+    checkEscape(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" }, properties: { "className": "this.className" } }, 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            [ngModel]=\"coordinates?.latitude\"\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            [ngModel]=\"coordinates?.longitude\"\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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "20.0.0", ngImport: i0, type: GetComponent, decorators: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, 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            [ngModel]=\"coordinates?.latitude\"\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            [ngModel]=\"coordinates?.longitude\"\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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "20.0.0", ngImport: i0, type: GetComponent$1, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'get' }, imports: [FormsModule, 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            [ngModel]=\"coordinates?.latitude\"\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            [ngModel]=\"coordinates?.longitude\"\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" }]
+            args: [{ host: { selector: 'get', '(window:keydown)': 'checkEscape($event)' }, imports: [FormsModule, 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            [ngModel]=\"coordinates?.latitude\"\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            [ngModel]=\"coordinates?.longitude\"\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" }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
             }] } });
 
-class ShowComponent {
+let ShowComponent$1 = class ShowComponent {
     className = 'ngx-helper-m3-coordinates';
     coordinates;
     config;
@@ -1463,12 +1473,20 @@ class ShowComponent {
         this.copied = type;
         this.copyTimeout = setTimeout(() => (this.copied = undefined), 1000);
     }
+    checkEscape(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" }, properties: { "className": "this.className" } }, 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: [""], 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: "20.0.0", ngImport: i0, type: ShowComponent, decorators: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, 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: [""], 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: "20.0.0", ngImport: i0, type: ShowComponent$1, 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" }]
+            args: [{ host: { selector: 'show', '(window:keydown)': 'checkEscape($event)' }, 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" }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['className']
@@ -1485,7 +1503,7 @@ class NgxHelperCoordinatesService {
         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, {
+            const componentRef = createComponent(GetComponent$1, {
                 environmentInjector: this.applicationRef.injector,
                 elementInjector: this.injector,
             });
@@ -1502,7 +1520,7 @@ class NgxHelperCoordinatesService {
         });
     }
     show(coordinates, config) {
-        const componentRef = createComponent(ShowComponent, {
+        const componentRef = createComponent(ShowComponent$1, {
             environmentInjector: this.applicationRef.injector,
             elementInjector: this.injector,
         });
@@ -2070,6 +2088,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: NgxHelperToastService }] });
 
+class GetComponent {
+    className = 'ngx-helper-m3-route';
+    route;
+    config;
+    close;
+    distance;
+    layers = [];
+    map;
+    ngOnInit() {
+        const coordinates = this.route.length > 0
+            ? [this.route[0].longitude, this.route[0].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: coordinates, zoom, projection: 'EPSG:4326' }),
+            layers: [new TileLayer({ source: new OSM() })],
+            target: 'ngx-helper-m3-route-map',
+        });
+        this.map
+            .getInteractions()
+            .getArray()
+            .forEach((interaction) => {
+            if (interaction instanceof interactionDoubleClickZoom)
+                this.map.removeInteraction(interaction);
+        });
+        this.addLayers();
+    }
+    addLayers() {
+        this.layers.forEach((layer) => this.map.removeLayer(layer));
+        this.layers = [];
+        this.distance = Helper.GEO.routeLength(this.route);
+        if (this.route.length === 0)
+            return;
+        // ADD LINES
+        this.route.forEach((coordinates, index) => {
+            if (index == 0)
+                return;
+            const color = this.config?.circle?.color || 'rgb(42, 101, 126)';
+            const from = [this.route[index - 1].longitude, this.route[index - 1].latitude];
+            const to = [coordinates.longitude, coordinates.latitude];
+            const feature = new Feature({ geometry: new LineString([from, to]) });
+            const layer = new VectorLayer({
+                source: new VectorSource({ features: [feature] }),
+                style: {
+                    'stroke-line-dash': [3, 3, 3],
+                    'stroke-color': color,
+                    'stroke-width': 2,
+                },
+            });
+            this.map.addLayer(layer);
+            this.layers.push(layer);
+        });
+        // ADD CIRCLES
+        this.route.forEach((coordinates, index) => {
+            const circle = {
+                size: this.config?.circle?.size || 10,
+                color: this.config?.circle?.color || 'rgb(42, 101, 126)',
+            };
+            const text = {
+                size: this.config?.text?.size || 13,
+                font: this.config?.text?.font || 'Yekan',
+                color: this.config?.text?.color || 'rgb(255, 255, 255)',
+            };
+            const point = new Point([coordinates.longitude, coordinates.latitude]);
+            const layer = new VectorLayer({
+                source: new VectorSource({ features: [new Feature(point)] }),
+                style: {
+                    // CIRCLE
+                    'circle-fill-color': circle.color,
+                    'circle-radius': circle.size,
+                    'circle-stroke-color': '#FFF',
+                    'circle-stroke-width': 1,
+                    // TEXT
+                    'text-value': (index + 1).toString(),
+                    'text-font': `${text.size}px ${text.font}`,
+                    'text-fill-color': text.color,
+                    'text-offset-y': 1,
+                    'text-stroke-color': circle.color,
+                    'text-stroke-width': 2,
+                },
+            });
+            this.map.addLayer(layer);
+            this.layers.push(layer);
+        });
+    }
+    setCoordinates(event) {
+        event.preventDefault();
+        const coordinates = this.map.getEventCoordinate(event).map((c) => +c.toFixed(7));
+        if (isNaN(coordinates[0]) || isNaN(coordinates[1]))
+            return;
+        this.route.push({ latitude: coordinates[1], longitude: coordinates[0] });
+        this.addLayers();
+        // ANIMATE
+        if (!this.config?.disableAnimate)
+            this.animate(this.route.length - 1);
+    }
+    selectRoute() {
+        if (this.route.length < 2)
+            return;
+        this.close(this.route);
+    }
+    animate(index) {
+        if (!this.route[index])
+            return;
+        const center = [this.route[index].longitude, this.route[index].latitude];
+        this.map.getView().animate({ center, duration: 250 });
+    }
+    delete(index) {
+        if (!this.route[index])
+            return;
+        this.route.splice(index, 1);
+        this.addLayers();
+    }
+    drop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        moveItemInArray(this.route, event.previousIndex, event.currentIndex);
+        this.addLayers();
+    }
+    checkEscape(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "get" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div\n    id=\"ngx-helper-m3-route-map\"\n    class=\"map\"\n    (dblclick)=\"setCoordinates($event)\"\n    (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"route\">\n    <div class=\"header\">\n        <div class=\"title\">ROUTE</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n\n    <div class=\"coordinates\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n        @for (item of route; track $index) {\n        <div class=\"coordinate ngx-helper-m3-route-coordinate\" cdkDrag cdkDragLockAxis=\"y\" cdkDragBoundary=\".coordinates\">\n            <!-- DRAG -->\n            @if (route.length > 1) { <mat-icon cdkDragHandle>drag_indicator</mat-icon> }\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n            <mat-icon class=\"delete\" (click)=\"delete($index)\">delete</mat-icon>\n        </div>\n        }\n    </div>\n\n    <div class=\"footer\">\n        <div class=\"distance\">{{ distance.length | number }} M</div>\n        <mat-icon [class.disabled]=\"route.length < 2\" (click)=\"selectRoute()\">done_all</mat-icon>\n    </div>\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.coordinates.cdk-drop-list-dragging .coordinates:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GetComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'get', '(window:keydown)': 'checkEscape($event)' }, imports: [DragDropModule, MatIcon, DecimalPipe], template: "<div\n    id=\"ngx-helper-m3-route-map\"\n    class=\"map\"\n    (dblclick)=\"setCoordinates($event)\"\n    (contextmenu)=\"setCoordinates($event)\"\n></div>\n\n<div class=\"route\">\n    <div class=\"header\">\n        <div class=\"title\">ROUTE</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n\n    <div class=\"coordinates\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n        @for (item of route; track $index) {\n        <div class=\"coordinate ngx-helper-m3-route-coordinate\" cdkDrag cdkDragLockAxis=\"y\" cdkDragBoundary=\".coordinates\">\n            <!-- DRAG -->\n            @if (route.length > 1) { <mat-icon cdkDragHandle>drag_indicator</mat-icon> }\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n            <mat-icon class=\"delete\" (click)=\"delete($index)\">delete</mat-icon>\n        </div>\n        }\n    </div>\n\n    <div class=\"footer\">\n        <div class=\"distance\">{{ distance.length | number }} M</div>\n        <mat-icon [class.disabled]=\"route.length < 2\" (click)=\"selectRoute()\">done_all</mat-icon>\n    </div>\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.coordinates.cdk-drop-list-dragging .coordinates:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+class ShowComponent {
+    className = 'ngx-helper-m3-route';
+    route;
+    config;
+    close;
+    distance;
+    copied;
+    copyTimeout;
+    map;
+    ngOnInit() {
+        this.distance = Helper.GEO.routeLength(this.route);
+        const coordinates = [this.route[0].longitude, this.route[0].latitude];
+        const zoom = this.config?.zoom || 15;
+        this.map = new Map({
+            view: new View({ center: coordinates, zoom, projection: 'EPSG:4326' }),
+            layers: [new TileLayer({ source: new OSM() })],
+            target: 'ngx-helper-m3-route-map',
+        });
+        this.map
+            .getInteractions()
+            .getArray()
+            .forEach((interaction) => {
+            if (interaction instanceof interactionDoubleClickZoom)
+                this.map.removeInteraction(interaction);
+        });
+        // ADD LINES
+        this.route.forEach((coordinates, index) => {
+            if (index == 0)
+                return;
+            const color = this.config?.circle?.color || 'rgb(42, 101, 126)';
+            const from = [this.route[index - 1].longitude, this.route[index - 1].latitude];
+            const to = [coordinates.longitude, coordinates.latitude];
+            const feature = new Feature({ geometry: new LineString([from, to]) });
+            const layer = new VectorLayer({
+                source: new VectorSource({ features: [feature] }),
+                style: {
+                    'stroke-line-dash': [3, 3, 3],
+                    'stroke-color': color,
+                    'stroke-width': 2,
+                },
+            });
+            this.map.addLayer(layer);
+        });
+        // ADD CIRCLES
+        this.route.forEach((coordinates, index) => {
+            const circle = {
+                size: this.config?.circle?.size || 10,
+                color: this.config?.circle?.color || 'rgb(42, 101, 126)',
+            };
+            const text = {
+                size: this.config?.text?.size || 13,
+                font: this.config?.text?.font || 'Yekan',
+                color: this.config?.text?.color || 'rgb(255, 255, 255)',
+            };
+            const point = new Point([coordinates.longitude, coordinates.latitude]);
+            const layer = new VectorLayer({
+                source: new VectorSource({ features: [new Feature(point)] }),
+                style: {
+                    // CIRCLE
+                    'circle-fill-color': circle.color,
+                    'circle-radius': circle.size,
+                    'circle-stroke-color': '#FFF',
+                    'circle-stroke-width': 1,
+                    // TEXT
+                    'text-value': (index + 1).toString(),
+                    'text-font': `${text.size}px ${text.font}`,
+                    'text-fill-color': text.color,
+                    'text-offset-y': 1,
+                    'text-stroke-color': circle.color,
+                    'text-stroke-width': 2,
+                },
+            });
+            this.map.addLayer(layer);
+        });
+    }
+    animate(index) {
+        if (!this.route[index])
+            return;
+        const center = [this.route[index].longitude, this.route[index].latitude];
+        this.map.getView().animate({ center, duration: 250 });
+    }
+    setCopy(index) {
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+        this.copied = index;
+        this.copyTimeout = setTimeout(() => (this.copied = undefined), 1000);
+    }
+    checkEscape(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div id=\"ngx-helper-m3-route-map\" class=\"map\"></div>\n\n<div class=\"route\">\n    <div class=\"header\">\n        <div class=\"title\">ROUTE</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n\n    <div class=\"coordinates\">\n        @for (item of route; track $index) {\n        <div class=\"coordinate ngx-helper-m3-route-coordinate\">\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n            <mat-icon\n                [cdkCopyToClipboard]=\"item.latitude.toString() + '|' + item.longitude.toString()\"\n                (click)=\"setCopy($index)\"\n            >\n                {{ copied === $index ? 'done_all' : 'copy' }}\n            </mat-icon>\n        </div>\n        }\n    </div>\n\n    <div class=\"footer\">\n        <div class=\"distance\">{{ distance.length | number }} M</div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'show', '(window:keydown)': 'checkEscape($event)' }, imports: [ClipboardModule, MatIcon, DecimalPipe], template: "<div id=\"ngx-helper-m3-route-map\" class=\"map\"></div>\n\n<div class=\"route\">\n    <div class=\"header\">\n        <div class=\"title\">ROUTE</div>\n        <mat-icon (click)=\"close()\">close</mat-icon>\n    </div>\n\n    <div class=\"coordinates\">\n        @for (item of route; track $index) {\n        <div class=\"coordinate ngx-helper-m3-route-coordinate\">\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\" (click)=\"animate($index)\">{{ item.longitude.toFixed(5) }}</div>\n            <mat-icon\n                [cdkCopyToClipboard]=\"item.latitude.toString() + '|' + item.longitude.toString()\"\n                (click)=\"setCopy($index)\"\n            >\n                {{ copied === $index ? 'done_all' : 'copy' }}\n            </mat-icon>\n        </div>\n        }\n    </div>\n\n    <div class=\"footer\">\n        <div class=\"distance\">{{ distance.length | number }} M</div>\n    </div>\n</div>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+class NgxHelperRouteService {
+    applicationRef;
+    injector;
+    constructor(applicationRef, injector) {
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+    }
+    get(arg1, arg2) {
+        const route = arg1 && Helper.IS.array(arg1) ? arg1 : [];
+        const config = arg2 || (arg1 && !Helper.IS.array(arg1) ? arg1 : undefined);
+        return new Promise((resolve, reject) => {
+            const componentRef = createComponent(GetComponent, {
+                environmentInjector: this.applicationRef.injector,
+                elementInjector: this.injector,
+            });
+            componentRef.instance.route = route;
+            componentRef.instance.config = config;
+            componentRef.instance.close = (route) => {
+                this.applicationRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                route ? resolve(route) : reject();
+            };
+            const htmlElement = componentRef.hostView.rootNodes[0];
+            this.applicationRef.attachView(componentRef.hostView);
+            document.body.appendChild(htmlElement);
+        });
+    }
+    show(route, config) {
+        const componentRef = createComponent(ShowComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        componentRef.instance.route = route;
+        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: "20.0.0", ngImport: i0, type: NgxHelperRouteService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperRouteService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperRouteService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+
 class NgxHelperMobileViewDirective {
     elementRef;
     rendererFactory;
@@ -2235,5 +2549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", 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, NgxHelperCoordinatesService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperHttpService, NgxHelperLoaderComponent, NgxHelperMobilePipe, NgxHelperMobileViewDirective, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperStickyDirective, 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, NgxHelperMobileViewDirective, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperRouteService, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperStickyDirective, NgxHelperToastService, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map