@webilix/ngx-helper-m3 0.0.16 → 0.0.18

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injector, Component, HostBinding, Input, Pipe, Injectable, Optional, Inject, EventEmitter, Output, inject, HostListener, createComponent, Directive } 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$1 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
@@ -17,10 +17,20 @@ import * as i2$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$2 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
+import * as i1$3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+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 * as i1$5 from '@angular/common/http';
 import { HttpHeaders, HttpEventType } from '@angular/common/http';
-import * as i1$3 from '@angular/platform-browser';
+import * as i1$4 from '@angular/platform-browser';
 
 const NGX_HELPER_CONFIG = new InjectionToken('NGX-HELPER-CONFIG');
 const provideNgxHelperConfig = (config) => {
@@ -1273,6 +1283,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.MatBottomSheet }, { type: i2$1.MatDialog }] });
 
+class GetComponent {
+    className = 'ngx-helper-m3-coordinates';
+    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" }, 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: "19.0.5", ngImport: i0, type: GetComponent, 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" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+class ShowComponent {
+    className = 'ngx-helper-m3-coordinates';
+    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" }, 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: "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" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+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) {
@@ -1285,13 +1483,13 @@ class NgxHelperMultiLinePipe {
             ? 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperMultiLinePipe, deps: [{ token: i1$4.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 }] });
+        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }] });
 
 class ToastComponent {
     elementRef;
@@ -1563,7 +1761,7 @@ class DownloadComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DownloadComponent, deps: [{ token: i1$4.HttpClient }, { token: NgxHelperToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DownloadComponent, deps: [{ token: i1$5.HttpClient }, { token: NgxHelperToastService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DownloadComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "download" }, properties: { "@host": "this.host", "className": "this.className", "style.bottom": "this.bottom" } }, ngImport: i0, template: "<div class=\"content\">\n    <mat-icon>file_download</mat-icon>\n    <div class=\"title\">{{ title }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
             trigger('host', [
                 transition(':enter', [
@@ -1583,7 +1781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"content\">\n    <mat-icon>file_download</mat-icon>\n    <div class=\"title\">{{ title }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }, { type: NgxHelperToastService }], propDecorators: { host: [{
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }, { type: NgxHelperToastService }], propDecorators: { host: [{
                 type: HostBinding,
                 args: ['@host']
             }], className: [{
@@ -1649,7 +1847,7 @@ class UploadComponent {
             error: (error) => this.close('ERROR', error.error, error.status),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UploadComponent, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UploadComponent, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UploadComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "upload" }, properties: { "@host": "this.host", "className": "this.className", "style.bottom": "this.bottom" } }, ngImport: i0, template: "<div class=\"content\">\n    <mat-icon>file_upload</mat-icon>\n    <div class=\"file\">{{ file.name }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
             trigger('host', [
                 transition(':enter', [
@@ -1669,7 +1867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             ]),
                         ]),
                     ], template: "<div class=\"content\">\n    <mat-icon>file_upload</mat-icon>\n    <div class=\"file\">{{ file.name }}</div>\n</div>\n\n<div class=\"progress-container\">\n    <div class=\"progress-value\" [style.width]=\"progress + '%'\"></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.HttpClient }], propDecorators: { host: [{
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }], propDecorators: { host: [{
                 type: HostBinding,
                 args: ['@host']
             }], className: [{
@@ -1922,13 +2120,13 @@ class NgxHelperSafePipe {
                 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperSafePipe, deps: [{ token: i1$4.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 }] });
+        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }] });
 
 /*
  * Public API Surface of ngx-helper-m3
@@ -1938,5 +2136,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, 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, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperProgressComponent, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperStickyDirective, NgxHelperToastService, NgxHelperValueBoxComponent, NgxHelperValueListComponent, NgxHelperValuePipe, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
 //# sourceMappingURL=webilix-ngx-helper-m3.mjs.map