## Image Card

A compact image card component for displaying visuals with style and simplicity.
Demo

Component | Demo
--- | ---
`{{ imageCardCode }}` |
`{{ imageCardMultiCode }}` |
`{{ imageCardDisplayCode }}` |
`{{ imageCardLoadingCode }}` |
`{{ imageCardDisabledCode }}` |

Required Imports
import { ImageCardModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Data type | Default | Required
--- | --- | --- | --- | --- | ---
Input | imageUrl | URL of the image to display. | n/a | n/a | true
Input | imageLabel | Label for the image. | n/a | n/a | true
Input | maxNumOfPhotos | Maximum number of photos allowed. | n/a | undefined | false
Input | loading | Indicates whether the component is loading. | n/a | n/a | false
Input | disabled | Disables the component when set to true. | n/a | n/a | false
Input | enableDelete | Enables or disables the delete option. | n/a | true | false
Input | enableCropper | Enables or disables the image cropper. | n/a | n/a | false
Input | imageFormats | Array of allowed image formats. | n/a | all available formats | false
Input | cropperModalViewRef | Reference to the view container for the cropper modal. | n/a | n/a | false
Input | enableCompression | Enables or disables image compression. | n/a | true | false
Input | maxImageSizeInBytes | Maximum size of the image in bytes. | n/a | 2MB | false
Input | maxImageCompressSizeInBytes | Maximum size of compressed image in bytes. | n/a | 700KB | false
Input | photoAspectRatio | Aspect ratio of the photo. | n/a | 1 (square) | false
Input | photos | Array of photos. | ImageModel | n/a | false
Input | disableUploadOnClick | Disables the upload action on click. | n/a | false | false
Input | faceDetector | Function to detect faces in images. | n/a | n/a | false
Input | nsfwChecker | Function to check for NSFW content in images. | n/a | n/a | false
Input | enableNsfwCheck | Enables NSFW checks on the images. | n/a | n/a | false
Input | enableFaceCheck | Enables face detection on the images. | n/a | n/a | false
Output | photosUpload | Event emitted when photos are uploaded successfully. | ImageModel | n/a | true
Output | photoUploadFail | Event emitted when photo upload fails. | string | n/a | false
Output | dupPhotosDetect | Event emitted when duplicate photos are detected. | number | n/a | false
Output | unsupportedFormatsDetect | Event emitted when unsupported formats are detected. | string | n/a | false
Output | maxUploadLimitExceeded | Event emitted when the upload limit is exceeded. | null | n/a | false

## CSS Properties

Name | Default Value
--- | ---
lib-image-card-container-width | 84px
lib-image-card-container-height | 84px
lib-image-card-container-background | #28252D
lib-image-card-container-shadow | 5.70371px 5.70371px 11.40741px 0px rgba(0, 0, 0, 0.32) inset, -3.42222px -3.42222px 4.56296px 0px rgba(255, 255, 255, 0.10) inset
lib-image-card-add-btn-background |
lib-image-card-add-btn-color | rgba(254, 60, 114, 1)
lib-image-card-add-btn-shadow | 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f
lib-image-card-loader-background | linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)
lib-image-card-delete-btn-color | rgba(254, 60, 114, 1)
lib-image-card-delete-btn-container-height | 23px
lib-image-card-delete-btn-container-width | 23px
lib-image-card-delete-btn-height | 20px
lib-image-card-delete-btn-width | 20px