@ldw-framework/material-media 0.2.0 → 0.3.1

package/fesm2022/ldw-framework-material-media.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Component, InjectionToken, Injectable } from '@angular/core';
+import { inject, ChangeDetectorRef, Component, InjectionToken, Injectable, Input, NgModule } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/dialog';
@@ -8,6 +8,13 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angu
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { LDuAnguBootTranslationPipe } from '@ldu-anguboot/i18n';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { LDuAnguBootApiService } from '@ldu-anguboot/http';
 import { firstValueFrom } from 'rxjs';
 
@@ -65,7 +72,7 @@ class LDwMaterialImageUploadDialogComponent {
                 [style.display]="'none'"
                 (change)="onChange($event)"
             />
-            <div class="ldw-mat-image-uploader"
+            <div class="ldw-mat-image-uploader--instance"
                 [style.backgroundImage]="$backgroundImage"
                 (keypress)="uploader.click()"
                 (click)="uploader.click()"
@@ -105,7 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 [style.display]="'none'"
                 (change)="onChange($event)"
             />
-            <div class="ldw-mat-image-uploader"
+            <div class="ldw-mat-image-uploader--instance"
                 [style.backgroundImage]="$backgroundImage"
                 (keypress)="uploader.click()"
                 (click)="uploader.click()"
@@ -148,6 +155,9 @@ class LDwMaterialMediaService {
         }
         return null;
     }
+    async clearImage(api) {
+        return firstValueFrom(this.lduApiService.DELETE(`${api}`));
+    }
     get ENV() { return this.MEDIA_API$; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialMediaService, providedIn: 'root' });
@@ -157,9 +167,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class LDwMaterialImageUploaderComponent {
+    service = inject(LDwMaterialMediaService);
+    readonly$ = false;
+    required$ = false;
+    formParent = new FormGroup({
+        value: new FormControl(null, [])
+    });
+    formParentControlName = 'value';
+    label = 'Value';
+    appearance = 'outline';
+    name = 'value';
+    type = 'jpg';
+    dimensions;
+    api;
+    set readonly(v) { this.readonly$ = coerceBooleanProperty(v); }
+    set required(v) { this.required$ = coerceBooleanProperty(v); }
+    async onUploadClick() {
+        if (this.api) {
+            const mediaUrl = await this.service.uploadImage(`${this.api}`);
+            if (mediaUrl) {
+                this.control.setValue(mediaUrl);
+            }
+        }
+    }
+    async onDeleteClick() {
+        if (this.api) {
+            await this.service.clearImage(this.api);
+        }
+        this.control.setValue(null);
+    }
+    get readonly() { return this.readonly$; }
+    ;
+    get required() { return this.required$; }
+    ;
+    get control() {
+        return this.formParent?.get(this.formParentControlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LDwMaterialImageUploaderComponent, isStandalone: true, selector: "ldw-mat-image-uploader", inputs: { formParent: "formParent", formParentControlName: "formParentControlName", label: "label", appearance: "appearance", name: "name", type: "type", dimensions: "dimensions", api: "api", readonly: "readonly", required: "required" }, host: { classAttribute: "ldw-mat-image-uploader" }, ngImport: i0, template: `
+        <form
+            [formGroup]="formParent"
+            novalidate
+            ><mat-form-field
+                [appearance]="appearance"
+                ><mat-label
+                    [innerHTML]="label" />
+                <input matInput
+                    [name]="name"
+                    [formControlName]="formParentControlName"
+                    [readonly]="readonly"
+                    [required]="required"
+                />
+                @if (dimensions)
+                {
+                    <mat-hint>{{ dimensions }}.{{ type }}</mat-hint>
+                }
+                <div matSuffix>
+                    @if (control.value)
+                    {
+                        <a matIconButton
+                            [href]="control.value"
+                            target="_blank"
+                        ><mat-icon>visibility</mat-icon>
+                        </a>
+                    }
+                    <button matIconButton
+                        (click)="onUploadClick()"
+                    ><mat-icon>add_photo_alternate</mat-icon>
+                    </button>
+                    <button matIconButton
+                        (click)="onDeleteClick()"
+                    ><mat-icon>delete</mat-icon>
+                    </button>
+                </div>
+                <ng-content/>
+            </mat-form-field>
+        </form>
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ldw-mat-image-uploader',
+                    host: { class: 'ldw-mat-image-uploader' },
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                    ],
+                    template: `
+        <form
+            [formGroup]="formParent"
+            novalidate
+            ><mat-form-field
+                [appearance]="appearance"
+                ><mat-label
+                    [innerHTML]="label" />
+                <input matInput
+                    [name]="name"
+                    [formControlName]="formParentControlName"
+                    [readonly]="readonly"
+                    [required]="required"
+                />
+                @if (dimensions)
+                {
+                    <mat-hint>{{ dimensions }}.{{ type }}</mat-hint>
+                }
+                <div matSuffix>
+                    @if (control.value)
+                    {
+                        <a matIconButton
+                            [href]="control.value"
+                            target="_blank"
+                        ><mat-icon>visibility</mat-icon>
+                        </a>
+                    }
+                    <button matIconButton
+                        (click)="onUploadClick()"
+                    ><mat-icon>add_photo_alternate</mat-icon>
+                    </button>
+                    <button matIconButton
+                        (click)="onDeleteClick()"
+                    ><mat-icon>delete</mat-icon>
+                    </button>
+                </div>
+                <ng-content/>
+            </mat-form-field>
+        </form>
+`
+                }]
+        }], propDecorators: { formParent: [{
+                type: Input,
+                args: [{ required: true }]
+            }], formParentControlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], appearance: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], dimensions: [{
+                type: Input
+            }], api: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
+const components = [
+    LDwMaterialImageUploadDialogComponent,
+    LDwMaterialImageUploaderComponent,
+];
+class LDwMaterialImageUploaderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderModule, imports: [LDwMaterialImageUploadDialogComponent,
+            LDwMaterialImageUploaderComponent], exports: [LDwMaterialImageUploadDialogComponent,
+            LDwMaterialImageUploaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderModule, imports: [components] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LDwMaterialImageUploaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components],
+                    exports: [...components]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LDW_MAT_MEDIA_API, LDwMaterialImageUploadDialogComponent, LDwMaterialMediaService };
+export { LDW_MAT_MEDIA_API, LDwMaterialImageUploadDialogComponent, LDwMaterialImageUploaderComponent, LDwMaterialImageUploaderModule, LDwMaterialMediaService };
 //# sourceMappingURL=ldw-framework-material-media.mjs.map

package/fesm2022/ldw-framework-material-media.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ldw-framework-material-media.mjs","sources":["../../../lib/src/components/ldw-mat-image-upload-dialog.component.ts","../../../lib/src/config/ldw-mat-media.config.ts","../../../lib/src/services/ldw-mat-media.service.ts","../../../lib/src/ldw-framework-material-media.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectorRef, Component, inject } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { LDuAnguBootTranslationPipe } from '@ldu-anguboot/i18n';\nimport { LDwMaterialMediaModel } from '../models/ldw-mat-media.model';\n\n@Component({\n    selector: 'ldw-mat-image-upload-dialog',\n    host: { class: 'ldw-mat-image-upload-dialog' },\n    imports: [\n        CommonModule,\n        MatButtonModule,\n        MatIconModule,\n        MatDialogModule,\n        LDuAnguBootTranslationPipe,\n    ],\n    template: `\n        <mat-dialog-actions>\n            <h2>{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.title' | i18n }}</h2>\n            <button class=\"ldw-mat-image-uploader-save\"\n                matButton\n                cdkFocusInitial\n                (click)=\"onSaveClick()\"\n            >{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.btnSave' | i18n }}</button>\n            <button class=\"ldw-mat-image-uploader-cancel\"\n                matButton\n                (click)=\"onCancelClick()\"\n            >{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.btnCancel' | i18n }}</button>\n        </mat-dialog-actions>\n        <mat-dialog-content>\n            <input class=\"ldw-mat-image-uploader-hidden-input\"\n                #uploader type=\"file\"\n                [style.display]=\"'none'\"\n                (change)=\"onChange($event)\"\n            />\n            <div class=\"ldw-mat-image-uploader\"\n                [style.backgroundImage]=\"$backgroundImage\"\n                (keypress)=\"uploader.click()\"\n                (click)=\"uploader.click()\"\n            >@if ($noData) { <mat-icon>image</mat-icon> }\n            </div>\n        </mat-dialog-content>\n`})\nexport class LDwMaterialImageUploadDialogComponent {\n\n    readonly dialogRef = inject(MatDialogRef<LDwMaterialImageUploadDialogComponent>);\n\n    readonly data = inject<LDwMaterialMediaModel>(MAT_DIALOG_DATA);\n\n    readonly cdr = inject(ChangeDetectorRef);\n\n    onSaveClick() {\n        this.dialogRef.close(this.data);\n    }\n\n    onCancelClick() {\n        this.dialogRef.close(false);\n    }\n\n    onChange($event: any) {\n        const files = $event?.target?.files;\n        if (files?.[0]) {\n            const picture = files[0];\n            const reader = new FileReader();\n            reader.readAsDataURL(picture);\n            reader.onload = () => {\n                this.data.imgBase64 = (reader.result as string).toString();\n                this.cdr.detectChanges();\n            };\n        }\n    }\n\n    get $backgroundImage() {\n        if (this.data.imgBase64) {\n            return 'url(' + this.data.imgBase64 + ')';\n        }\n        if (this.data.imgSrc) {\n            return 'url(' + this.data.imgSrc + ')';\n        }\n        return '';\n    }\n\n    get $noData() {\n        return !this.data?.imgBase64 && !this.data?.imgSrc;\n    }\n}\n","import { InjectionToken } from '@angular/core';\n\nexport const LDW_MAT_MEDIA_API = new InjectionToken<{\n    url: string;\n}>('LDW_MAT_MEDIA_API');\n","import { inject, Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { LDuAnguBootApiService } from '@ldu-anguboot/http';\nimport { firstValueFrom } from 'rxjs';\nimport { LDwMaterialImageUploadDialogComponent } from '../components/ldw-mat-image-upload-dialog.component';\nimport { LDW_MAT_MEDIA_API } from '../config/ldw-mat-media.config';\nimport { LDwMaterialMediaModel } from '../models/ldw-mat-media.model';\n\n@Injectable({ providedIn: 'root' })\nexport class LDwMaterialMediaService {\n\n    private readonly MEDIA_API$ = inject(LDW_MAT_MEDIA_API);\n\n    private readonly lduApiService = inject(LDuAnguBootApiService);\n\n    private readonly matDialog = inject(MatDialog);\n\n    async uploadImage(uploadUrl: string, type: 'jpg' | 'png' = 'jpg', data?: LDwMaterialMediaModel) {\n        const media = await firstValueFrom(this.matDialog.open(LDwMaterialImageUploadDialogComponent, {\n            height: 'calc(100% - 1rem)',\n            width: 'calc(100% - 1rem)',\n            maxHeight: '100%',\n            maxWidth: '100%',\n            data: {\n                imgSrc: data?.imgSrc,\n                imgBase64: data?.imgBase64,\n            },\n        }).afterClosed());\n        if (media?.imgBase64) {\n            const response = await firstValueFrom(this.lduApiService.PUT<LDwMaterialMediaModel>(uploadUrl, media));\n            if (response?.id) {\n                switch (type) {\n                    case 'jpg':\n                        return this.lduApiService.url(`${this.ENV.url}/${response.id}.jpg?t=${Date.now()}`);\n                    case 'png':\n                        return this.lduApiService.url(`${this.ENV.url}/${response.id}.png?t=${Date.now()}`);\n                    default:\n                        break;\n                }\n            }\n        }\n        return null;\n    }\n\n    get ENV() { return this.MEDIA_API$; }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ldw-framework-material-media.mjs","sources":["../../../lib/src/components/ldw-mat-image-upload-dialog.component.ts","../../../lib/src/config/ldw-mat-media.config.ts","../../../lib/src/services/ldw-mat-media.service.ts","../../../lib/src/components/ldw-mat-image-uploader.component.ts","../../../lib/src/modules/ldw-mat-image-uploader.module.ts","../../../lib/src/ldw-framework-material-media.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectorRef, Component, inject } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { LDuAnguBootTranslationPipe } from '@ldu-anguboot/i18n';\nimport { LDwMaterialMediaModel } from '../models/ldw-mat-media.model';\n\n@Component({\n    selector: 'ldw-mat-image-upload-dialog',\n    host: { class: 'ldw-mat-image-upload-dialog' },\n    imports: [\n        CommonModule,\n        MatButtonModule,\n        MatIconModule,\n        MatDialogModule,\n        LDuAnguBootTranslationPipe,\n    ],\n    template: `\n        <mat-dialog-actions>\n            <h2>{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.title' | i18n }}</h2>\n            <button class=\"ldw-mat-image-uploader-save\"\n                matButton\n                cdkFocusInitial\n                (click)=\"onSaveClick()\"\n            >{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.btnSave' | i18n }}</button>\n            <button class=\"ldw-mat-image-uploader-cancel\"\n                matButton\n                (click)=\"onCancelClick()\"\n            >{{ 'LDU_ANGUBOOT_IMG_UPLOAD_DIALOG.btnCancel' | i18n }}</button>\n        </mat-dialog-actions>\n        <mat-dialog-content>\n            <input class=\"ldw-mat-image-uploader-hidden-input\"\n                #uploader type=\"file\"\n                [style.display]=\"'none'\"\n                (change)=\"onChange($event)\"\n            />\n            <div class=\"ldw-mat-image-uploader--instance\"\n                [style.backgroundImage]=\"$backgroundImage\"\n                (keypress)=\"uploader.click()\"\n                (click)=\"uploader.click()\"\n            >@if ($noData) { <mat-icon>image</mat-icon> }\n            </div>\n        </mat-dialog-content>\n`})\nexport class LDwMaterialImageUploadDialogComponent {\n\n    readonly dialogRef = inject(MatDialogRef<LDwMaterialImageUploadDialogComponent>);\n\n    readonly data = inject<LDwMaterialMediaModel>(MAT_DIALOG_DATA);\n\n    readonly cdr = inject(ChangeDetectorRef);\n\n    onSaveClick() {\n        this.dialogRef.close(this.data);\n    }\n\n    onCancelClick() {\n        this.dialogRef.close(false);\n    }\n\n    onChange($event: any) {\n        const files = $event?.target?.files;\n        if (files?.[0]) {\n            const picture = files[0];\n            const reader = new FileReader();\n            reader.readAsDataURL(picture);\n            reader.onload = () => {\n                this.data.imgBase64 = (reader.result as string).toString();\n                this.cdr.detectChanges();\n            };\n        }\n    }\n\n    get $backgroundImage() {\n        if (this.data.imgBase64) {\n            return 'url(' + this.data.imgBase64 + ')';\n        }\n        if (this.data.imgSrc) {\n            return 'url(' + this.data.imgSrc + ')';\n        }\n        return '';\n    }\n\n    get $noData() {\n        return !this.data?.imgBase64 && !this.data?.imgSrc;\n    }\n}\n","import { InjectionToken } from '@angular/core';\n\nexport const LDW_MAT_MEDIA_API = new InjectionToken<{\n    url: string;\n}>('LDW_MAT_MEDIA_API');\n","import { inject, Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { LDuAnguBootApiService } from '@ldu-anguboot/http';\nimport { firstValueFrom } from 'rxjs';\nimport { LDwMaterialImageUploadDialogComponent } from '../components/ldw-mat-image-upload-dialog.component';\nimport { LDW_MAT_MEDIA_API } from '../config/ldw-mat-media.config';\nimport { LDwMaterialMediaModel } from '../models/ldw-mat-media.model';\n\n@Injectable({ providedIn: 'root' })\nexport class LDwMaterialMediaService {\n\n    private readonly MEDIA_API$ = inject(LDW_MAT_MEDIA_API);\n\n    private readonly lduApiService = inject(LDuAnguBootApiService);\n\n    private readonly matDialog = inject(MatDialog);\n\n    async uploadImage(uploadUrl: string, type: 'jpg' | 'png' = 'jpg', data?: LDwMaterialMediaModel) {\n        const media = await firstValueFrom(this.matDialog.open(LDwMaterialImageUploadDialogComponent, {\n            height: 'calc(100% - 1rem)',\n            width: 'calc(100% - 1rem)',\n            maxHeight: '100%',\n            maxWidth: '100%',\n            data: {\n                imgSrc: data?.imgSrc,\n                imgBase64: data?.imgBase64,\n            },\n        }).afterClosed());\n        if (media?.imgBase64) {\n            const response = await firstValueFrom(this.lduApiService.PUT<LDwMaterialMediaModel>(uploadUrl, media));\n            if (response?.id) {\n                switch (type) {\n                    case 'jpg':\n                        return this.lduApiService.url(`${this.ENV.url}/${response.id}.jpg?t=${Date.now()}`);\n                    case 'png':\n                        return this.lduApiService.url(`${this.ENV.url}/${response.id}.png?t=${Date.now()}`);\n                    default:\n                        break;\n                }\n            }\n        }\n        return null;\n    }\n\n    async clearImage(api: string) {\n        return firstValueFrom(this.lduApiService.DELETE(`${api}`));\n    }\n\n    get ENV() { return this.MEDIA_API$; }\n}\n","import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CommonModule } from '@angular/common';\nimport { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { LDwMaterialMediaService } from '../services/ldw-mat-media.service';\n\n@Component({\n    selector: 'ldw-mat-image-uploader',\n    host: { class: 'ldw-mat-image-uploader' },\n    imports: [\n        CommonModule,\n        FormsModule,\n        ReactiveFormsModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n    ],\n    template: `\n        <form\n            [formGroup]=\"formParent\"\n            novalidate\n            ><mat-form-field\n                [appearance]=\"appearance\"\n                ><mat-label\n                    [innerHTML]=\"label\" />\n                <input matInput\n                    [name]=\"name\"\n                    [formControlName]=\"formParentControlName\"\n                    [readonly]=\"readonly\"\n                    [required]=\"required\"\n                />\n                @if (dimensions)\n                {\n                    <mat-hint>{{ dimensions }}.{{ type }}</mat-hint>\n                }\n                <div matSuffix>\n                    @if (control.value)\n                    {\n                        <a matIconButton\n                            [href]=\"control.value\"\n                            target=\"_blank\"\n                        ><mat-icon>visibility</mat-icon>\n                        </a>\n                    }\n                    <button matIconButton\n                        (click)=\"onUploadClick()\"\n                    ><mat-icon>add_photo_alternate</mat-icon>\n                    </button>\n                    <button matIconButton\n                        (click)=\"onDeleteClick()\"\n                    ><mat-icon>delete</mat-icon>\n                    </button>\n                </div>\n                <ng-content/>\n            </mat-form-field>\n        </form>\n`})\nexport class LDwMaterialImageUploaderComponent {\n\n    private readonly service = inject(LDwMaterialMediaService);\n\n    private readonly$: string | boolean = false;\n\n    private required$: string | boolean = false;\n\n    @Input({ required: true })\n    formParent: FormGroup = new FormGroup({\n        value: new FormControl<string | null | undefined>(null, [])\n    });\n\n    @Input({ required: true })\n    formParentControlName = 'value';\n\n    @Input({ required: true })\n    label = 'Value';\n\n    @Input()\n    appearance: 'fill' | 'outline' = 'outline';\n\n    @Input()\n    name = 'value';\n\n    @Input()\n    type: 'jpg' | 'png' = 'jpg';\n\n    @Input()\n    dimensions: string | null | undefined;\n\n    @Input()\n    api: string | null | undefined;\n\n    @Input()\n    set readonly(v) { this.readonly$ = coerceBooleanProperty(v); }\n\n    @Input()\n    set required(v) { this.required$ = coerceBooleanProperty(v); }\n\n    async onUploadClick() {\n        if (this.api) {\n            const mediaUrl = await this.service.uploadImage(`${this.api}`);\n            if (mediaUrl) {\n                this.control.setValue(mediaUrl);\n            }\n        }\n    }\n\n    async onDeleteClick() {\n        if (this.api) {\n            await this.service.clearImage(this.api);\n        }\n        this.control.setValue(null);\n    }\n\n    get readonly() { return this.readonly$; };\n\n    get required() { return this.required$; };\n\n    get control() {\n        return this.formParent?.get(this.formParentControlName) as FormControl<string | null | undefined>;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { LDwMaterialImageUploadDialogComponent } from '../components/ldw-mat-image-upload-dialog.component';\nimport { LDwMaterialImageUploaderComponent } from '../components/ldw-mat-image-uploader.component';\n\nconst components = [\n    LDwMaterialImageUploadDialogComponent,\n    LDwMaterialImageUploaderComponent,\n];\n\n@NgModule({\n    imports: [...components],\n    exports: [...components]\n})\nexport class LDwMaterialImageUploaderModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i2","i3","i5"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldw-framework/material-media",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/scss/ldw-framework-material-media.scss

@@ -1,32 +1,32 @@
-.ldw-mat-image-uploader {
-    background-color: #eaeaea;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border-width: 1px;
-    border-style: dotted;
-    border-color: inherit;
-    height: calc(100% - 2px);
-    width: calc(100% - 2px);
-    position: relative;
+.ldw-mat-image-upload-dialog {
 
-    .mat-icon {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        position: absolute;
-        font-size: 48px;
-        height: 48px;
-        width: 48px;
-    }
+    .ldw-mat-image-uploader--instance {
+        background-color: #eaeaea;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        border-width: 1px;
+        border-style: dotted;
+        border-color: inherit;
+        height: calc(100% - 2px);
+        width: calc(100% - 2px);
+        position: relative;
 
-    &:hover {
-        cursor: pointer;
-        opacity: 0.925;
-    }
-}
+        .mat-icon {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            position: absolute;
+            font-size: 48px;
+            height: 48px;
+            width: 48px;
+        }
 
-.ldw-mat-image-upload-dialog {
+        &:hover {
+            cursor: pointer;
+            opacity: 0.925;
+        }
+    }
 
     .mat-mdc-dialog-actions {
         h2 {

package/types/ldw-framework-material-media.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectorRef, InjectionToken } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import { FormGroup, FormControl } from '@angular/forms';
 
 interface LDwMaterialMediaModel {
     id?: number;
@@ -21,15 +22,45 @@ declare class LDwMaterialImageUploadDialogComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<LDwMaterialImageUploadDialogComponent, "ldw-mat-image-upload-dialog", never, {}, {}, never, never, true, never>;
 }
 
+declare class LDwMaterialImageUploaderComponent {
+    private readonly service;
+    private readonly$;
+    private required$;
+    formParent: FormGroup;
+    formParentControlName: string;
+    label: string;
+    appearance: 'fill' | 'outline';
+    name: string;
+    type: 'jpg' | 'png';
+    dimensions: string | null | undefined;
+    api: string | null | undefined;
+    set readonly(v: string | boolean);
+    set required(v: string | boolean);
+    onUploadClick(): Promise<void>;
+    onDeleteClick(): Promise<void>;
+    get readonly(): string | boolean;
+    get required(): string | boolean;
+    get control(): FormControl<string | null | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LDwMaterialImageUploaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LDwMaterialImageUploaderComponent, "ldw-mat-image-uploader", never, { "formParent": { "alias": "formParent"; "required": true; }; "formParentControlName": { "alias": "formParentControlName"; "required": true; }; "label": { "alias": "label"; "required": true; }; "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dimensions": { "alias": "dimensions"; "required": false; }; "api": { "alias": "api"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
 declare const LDW_MAT_MEDIA_API: InjectionToken<{
     url: string;
 }>;
 
+declare class LDwMaterialImageUploaderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LDwMaterialImageUploaderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LDwMaterialImageUploaderModule, never, [typeof LDwMaterialImageUploadDialogComponent, typeof LDwMaterialImageUploaderComponent], [typeof LDwMaterialImageUploadDialogComponent, typeof LDwMaterialImageUploaderComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<LDwMaterialImageUploaderModule>;
+}
+
 declare class LDwMaterialMediaService {
     private readonly MEDIA_API$;
     private readonly lduApiService;
     private readonly matDialog;
     uploadImage(uploadUrl: string, type?: 'jpg' | 'png', data?: LDwMaterialMediaModel): Promise<string | null>;
+    clearImage(api: string): Promise<unknown>;
     get ENV(): {
         url: string;
     };
@@ -37,5 +68,5 @@ declare class LDwMaterialMediaService {
     static ɵprov: i0.ɵɵInjectableDeclaration<LDwMaterialMediaService>;
 }
 
-export { LDW_MAT_MEDIA_API, LDwMaterialImageUploadDialogComponent, LDwMaterialMediaService };
+export { LDW_MAT_MEDIA_API, LDwMaterialImageUploadDialogComponent, LDwMaterialImageUploaderComponent, LDwMaterialImageUploaderModule, LDwMaterialMediaService };
 export type { LDwMaterialMediaModel };