@webilix/ngx-helper-m3 0.0.32 → 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;
@@ -2599,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