Me image input preview

apps/demo/project.json

@@ -26,6 +26,7 @@
           }
         ],
         "styles": [
+          "node_modules/basiclightbox/dist/basicLightbox.min.css",
           "node_modules/tippy.js/dist/tippy.css",
           "node_modules/tippy.js/themes/light.css",
           "node_modules/tippy.js/themes/light-border.css",

apps/metadata-editor/project.json

@@ -37,6 +37,7 @@
         "styles": [
           "tailwind.base.css",
           "apps/metadata-editor/src/styles.css",
+          "node_modules/basiclightbox/dist/basicLightbox.min.css",
           "node_modules/ol/ol.css",
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
         ],

libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts

@@ -8,7 +8,7 @@ import {
   Output,
 } from '@angular/core'
 import { GraphicOverview } from '@geonetwork-ui/common/domain/model/record'
-import { ImageInputComponent } from '@geonetwork-ui/ui/inputs'
+import { ImageInputComponent } from '@geonetwork-ui/ui/elements'
 import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
 import { NotificationsService } from '@geonetwork-ui/feature/notifications'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'

libs/ui/elements/src/index.ts

@@ -5,6 +5,7 @@ export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
+export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -19,5 +20,5 @@ export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
-export * from './lib/user-preview/user-preview.component'
 export * from './lib/user-feedback-item/user-feedback-item.component'
+export * from './lib/user-preview/user-preview.component'

libs/ui/inputs/src/lib/image-input/image-input.component.html → libs/ui/elements/src/lib/image-input/image-input.component.html

@@ -2,31 +2,16 @@
 </ng-container>
 
 <ng-template #withImage>
-  <div class="w-full h-full flex flex-col gap-2">
-    <div class="flex-1 group relative">
-      <img
-        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
-        [alt]="altText"
-        loading="lazy"
-        [src]="previewUrl"
-      />
-      <gn-ui-button
-        type="outline"
-        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
-        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
-        (buttonClick)="handleDelete()"
-        [disabled]="disabled"
-      >
-        <ng-icon name="iconoirBin"></ng-icon>
-      </gn-ui-button>
-    </div>
+  <div class="w-80 h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+    </gn-ui-image-overlay-preview>
     <gn-ui-text-input
       *ngIf="showAltTextInput"
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
-      [disabled]="disabled"
+      [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
       <gn-ui-button type="gray" (buttonClick)="handleDelete()">

libs/ui/inputs/src/lib/image-input/image-input.component.stories.ts → libs/ui/elements/src/lib/image-input/image-input.component.stories.ts

@@ -15,7 +15,7 @@ import { ImageInputComponent } from './image-input.component'
 import { action } from '@storybook/addon-actions'
 
 export default {
-  title: 'Inputs/ImageInputComponent',
+  title: 'Elements/ImageInputComponent',
   component: ImageInputComponent,
   decorators: [
     applicationConfig({

libs/ui/inputs/src/lib/image-input/image-input.component.ts → libs/ui/elements/src/lib/image-input/image-input.component.ts

@@ -9,27 +9,30 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { downgradeImage, megabytesToBytes } from '@geonetwork-ui/util/shared'
-import { firstValueFrom } from 'rxjs'
-import { ButtonComponent } from '../button/button.component'
-import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { UrlInputComponent } from '../url-input/url-input.component'
-import { TextInputComponent } from '../text-input/text-input.component'
+import {
+  ButtonComponent,
+  FilesDropDirective,
+  TextInputComponent,
+  UrlInputComponent,
+} from '@geonetwork-ui/ui/inputs'
+import { downgradeImage, megabytesToBytes } from '@geonetwork-ui/util/shared'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
+  iconoirBin,
   iconoirFramePlusIn,
+  iconoirLink,
   iconoirMediaImage,
   iconoirMediaImageXmark,
-  iconoirBin,
   iconoirPlus,
-  iconoirLink,
 } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { firstValueFrom } from 'rxjs'
+import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-overlay-preview.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -46,6 +49,7 @@ import {
     UrlInputComponent,
     TextInputComponent,
     NgIconComponent,
+    ImageOverlayPreviewComponent,
   ],
   providers: [
     provideIcons({

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
-import { RouterModule } from '@angular/router'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { UtilSharedModule } from '@geonetwork-ui/util/shared'
-import { PopoverComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
-import { MaxLinesComponent, UiLayoutModule } from '@geonetwork-ui/ui/layout'
-import { TranslateModule } from '@ngx-translate/core'
-import { ThumbnailComponent } from './thumbnail/thumbnail.component'
+import { RouterModule } from '@angular/router'
 import {
   BadgeComponent,
   TextInputComponent,
   UiInputsModule,
 } from '@geonetwork-ui/ui/inputs'
-import { FormsModule } from '@angular/forms'
+import { MaxLinesComponent, UiLayoutModule } from '@geonetwork-ui/ui/layout'
+import { PopoverComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
+import { UtilSharedModule } from '@geonetwork-ui/util/shared'
+import { provideNgIconsConfig } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
-import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { ImageInputComponent } from './image-input/image-input.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
-import { provideNgIconsConfig } from '@ng-icons/core'
+import { UserPreviewComponent } from './user-preview/user-preview.component'
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     BadgeComponent,
     MaxLinesComponent,
     TextInputComponent,
+    ImageInputComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -50,6 +52,7 @@ import { provideNgIconsConfig } from '@ng-icons/core'
     AvatarComponent,
     UserPreviewComponent,
     MarkdownParserComponent,
+    ImageInputComponent,
   ],
 })
 export class UiElementsModule {}

libs/ui/inputs/src/index.ts

@@ -6,23 +6,22 @@ export * from './lib/checkbox/checkbox.component'
 export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
-export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'
+export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
 export * from './lib/dropdown-selector/dropdown-selector.component'
 export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
+export * from './lib/file-input/file-input.component'
+export * from './lib/files-drop/files-drop.directive'
 export * from './lib/navigation-button/navigation-button.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
+export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/switch-toggle/switch-toggle.component'
-export * from './lib/file-input/file-input.component'
-export * from './lib/image-input/image-input.component'
-export * from './lib/url-input/url-input.component'

libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -1,32 +1,16 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { UtilSharedModule } from '@geonetwork-ui/util/shared'
-import { TranslateModule } from '@ngx-translate/core'
-import { TagInputModule } from 'ngx-chips'
-import { NgxDropzoneModule } from 'ngx-dropzone'
-import { ButtonComponent } from './button/button.component'
-import { BadgeComponent } from './badge/badge.component'
-import { ChipsInputComponent } from './chips-input/chips-input.component'
-import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
-import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
-import { TextAreaComponent } from './text-area/text-area.component'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
-import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
-import { OverlayModule } from '@angular/cdk/overlay'
 import { MatCheckboxModule } from '@angular/material/checkbox'
-import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
-import { CheckToggleComponent } from './check-toggle/check-toggle.component'
-import { MatTooltipModule } from '@angular/material/tooltip'
-import { CommonModule } from '@angular/common'
-import { CheckboxComponent } from './checkbox/checkbox.component'
-import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatNativeDateModule } from '@angular/material/core'
-import { EditableLabelDirective } from './editable-label/editable-label.directive'
-import { ImageInputComponent } from './image-input/image-input.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
+import { UtilSharedModule } from '@geonetwork-ui/util/shared'
 import {
   NgIconComponent,
   provideIcons,
@@ -37,6 +21,21 @@ import {
   matExpandLess,
   matExpandMore,
 } from '@ng-icons/material-icons/baseline'
+import { TranslateModule } from '@ngx-translate/core'
+import { TagInputModule } from 'ngx-chips'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { BadgeComponent } from './badge/badge.component'
+import { ButtonComponent } from './button/button.component'
+import { CheckToggleComponent } from './check-toggle/check-toggle.component'
+import { CheckboxComponent } from './checkbox/checkbox.component'
+import { ChipsInputComponent } from './chips-input/chips-input.component'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
+import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
+import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
+import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
+import { TextAreaComponent } from './text-area/text-area.component'
+import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 
 @NgModule({
   declarations: [
@@ -66,7 +65,6 @@ import {
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
-    ImageInputComponent,
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
@@ -95,7 +93,6 @@ import {
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
-    ImageInputComponent,
     BadgeComponent,
   ],
 })