@webilix/ngx-helper-m3 0.0.31 → 0.0.33

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

@@ -2088,6 +2088,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: NgxHelperToastService }] });
 
+class ImageComponent {
+    className = 'ngx-helper-m3-image';
+    image;
+    config;
+    close;
+    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: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ImageComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "image" }, listeners: { "window:keydown": "checkEscape($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div\n    class=\"background\"\n    [style.background-color]=\"config?.backgroundColor || 'var(--background)'\"\n    [style.opacity]=\"config?.backgroundOpacity || 0.95\"\n></div>\n\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<div class=\"image\">\n    <img [src]=\"image.image\" />\n</div>\n\n<!-- DESCRIPTION -->\n@if (image.description) {\n<div class=\"description\">\n    <div class=\"content\" [innerHTML]=\"image.description | ngxHelperMultiLine\"></div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'image', '(window:keydown)': 'checkEscape($event)' }, imports: [MatIcon, MatIconButton, NgxHelperMultiLinePipe], template: "<div\n    class=\"background\"\n    [style.background-color]=\"config?.backgroundColor || 'var(--background)'\"\n    [style.opacity]=\"config?.backgroundOpacity || 0.95\"\n></div>\n\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<div class=\"image\">\n    <img [src]=\"image.image\" />\n</div>\n\n<!-- DESCRIPTION -->\n@if (image.description) {\n<div class=\"description\">\n    <div class=\"content\" [innerHTML]=\"image.description | ngxHelperMultiLine\"></div>\n</div>\n}\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+class GalleryComponent {
+    className = 'ngx-helper-m3-image';
+    images;
+    config;
+    close;
+    index = 0;
+    checkKey(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+        if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            this.changeIndex(-1);
+        }
+        if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            this.changeIndex(1);
+        }
+    }
+    changeIndex(change) {
+        this.index += change;
+        if (this.index < 0)
+            this.index = this.images.length - 1;
+        if (this.index >= this.images.length)
+            this.index = 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GalleryComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "gallery" }, listeners: { "window:keydown": "checkKey($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div\n    class=\"background\"\n    [style.background-color]=\"config?.backgroundColor || 'var(--background)'\"\n    [style.opacity]=\"config?.backgroundOpacity || 0.95\"\n></div>\n\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<div class=\"arrows\">\n    <button class=\"arrow\" mat-icon-button (click)=\"changeIndex(-1)\"><mat-icon>chevron_right</mat-icon></button>\n    <div class=\"count\">{{ index + 1 }} \u0627\u0632 {{ images.length }}</div>\n    <button class=\"arrow\" mat-icon-button (click)=\"changeIndex(1)\"><mat-icon>chevron_left</mat-icon></button>\n</div>\n\n<div class=\"image\">\n    <img [src]=\"images[index].image\" />\n</div>\n\n<!-- DESCRIPTION -->\n@if (images[index].description) {\n<div class=\"description\">\n    <div class=\"content\" [innerHTML]=\"images[index].description | ngxHelperMultiLine\"></div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: NgxHelperMultiLinePipe, name: "ngxHelperMultiLine" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GalleryComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'gallery', '(window:keydown)': 'checkKey($event)' }, imports: [MatIcon, MatIconButton, NgxHelperMultiLinePipe], template: "<div\n    class=\"background\"\n    [style.background-color]=\"config?.backgroundColor || 'var(--background)'\"\n    [style.opacity]=\"config?.backgroundOpacity || 0.95\"\n></div>\n\n<button class=\"close\" mat-icon-button (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n<div class=\"arrows\">\n    <button class=\"arrow\" mat-icon-button (click)=\"changeIndex(-1)\"><mat-icon>chevron_right</mat-icon></button>\n    <div class=\"count\">{{ index + 1 }} \u0627\u0632 {{ images.length }}</div>\n    <button class=\"arrow\" mat-icon-button (click)=\"changeIndex(1)\"><mat-icon>chevron_left</mat-icon></button>\n</div>\n\n<div class=\"image\">\n    <img [src]=\"images[index].image\" />\n</div>\n\n<!-- DESCRIPTION -->\n@if (images[index].description) {\n<div class=\"description\">\n    <div class=\"content\" [innerHTML]=\"images[index].description | ngxHelperMultiLine\"></div>\n</div>\n}\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['className']
+            }] } });
+
+class NgxHelperImageService {
+    applicationRef;
+    injector;
+    constructor(applicationRef, injector) {
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+    }
+    showImage(image, config) {
+        const componentRef = createComponent(ImageComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        componentRef.instance.image = image;
+        componentRef.instance.config = config;
+        componentRef.instance.close = () => {
+            this.applicationRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            document.body.style.overflow = 'visible';
+        };
+        const htmlElement = componentRef.hostView.rootNodes[0];
+        this.applicationRef.attachView(componentRef.hostView);
+        document.body.appendChild(htmlElement);
+        document.body.style.overflow = 'hidden';
+    }
+    showGallery(images, config) {
+        if (images.length === 0)
+            return;
+        if (images.length === 1) {
+            this.showImage(images[0], config);
+            return;
+        }
+        const componentRef = createComponent(GalleryComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector,
+        });
+        componentRef.instance.images = images;
+        componentRef.instance.config = config;
+        componentRef.instance.close = () => {
+            this.applicationRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            document.body.style.overflow = 'visible';
+        };
+        const htmlElement = componentRef.hostView.rootNodes[0];
+        this.applicationRef.attachView(componentRef.hostView);
+        document.body.appendChild(htmlElement);
+        document.body.style.overflow = 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperImageService, 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: NgxHelperImageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperImageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+
 class GetComponent {
     className = 'ngx-helper-m3-route';
     route;
@@ -2235,6 +2354,8 @@ class ShowComponent {
     close;
     distance;
     copied;
+    index = 0;
+    layers = [];
     copyTimeout;
     map;
     ngOnInit() {
@@ -2302,10 +2423,51 @@ class ShowComponent {
             });
             this.map.addLayer(layer);
         });
+        this.addLayers();
+    }
+    addLayers() {
+        this.layers.forEach((layer) => this.map.removeLayer(layer));
+        this.layers = [];
+        // ADD CIRCLES
+        this.route.forEach((coordinates, index) => {
+            if (index !== this.index)
+                return;
+            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 * 1.4,
+                    'circle-stroke-color': '#FFF',
+                    'circle-stroke-width': 1,
+                    // TEXT
+                    'text-value': (index + 1).toString(),
+                    'text-font': `${text.size * 1.2}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);
+        });
     }
     animate(index) {
         if (!this.route[index])
             return;
+        this.index = index;
+        this.addLayers();
         const center = [this.route[index].longitude, this.route[index].latitude];
         this.map.getView().animate({ center, duration: 250 });
     }
@@ -2315,20 +2477,27 @@ class ShowComponent {
         this.copied = index;
         this.copyTimeout = setTimeout(() => (this.copied = undefined), 1000);
     }
-    checkEscape(event) {
+    checkKey(event) {
         if (!(event instanceof KeyboardEvent))
             return;
         if (event.code === 'Escape') {
             event.preventDefault();
             this.close();
         }
+        if (this.index !== undefined) {
+            const change = event.code === 'ArrowUp' ? -1 : event.code === 'ArrowDown' ? 1 : 0;
+            if (change !== 0) {
+                event.preventDefault();
+                this.animate(this.index + change);
+            }
+        }
     }
     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" }] });
+    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": "checkKey($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\" [class.selected]=\"index === $index\" (click)=\"animate($index)\">\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\">{{ 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" }]
+            args: [{ host: { selector: 'show', '(window:keydown)': 'checkKey($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\" [class.selected]=\"index === $index\" (click)=\"animate($index)\">\n            <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n            <div class=\"value\">{{ item.latitude.toFixed(5) }}</div>\n            <div class=\"value\">{{ 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']
@@ -2549,5 +2718,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, NgxHelperRouteService, 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, NgxHelperImageService, 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