Build

ng build @enumsoftware/ui-components

Enum Ui Components

Ui components library for Angular with color picker, cropper and image picker.

Example

Color Picker

<div libColorPicker>Click me!</div>

Image Picker and Cropper

<enum-image-picker></enum-image-picker>

API

Color Picker

@Inputs()

| Input | Type | Default| Description | |--|--|--|--| | allowSaveColor| boolean | true | It says weather the user can save colors | allowTransparency | boolean | true | It says weather the user can pick transparency for color | startingRGB | RGB | { r: 255, g: 255, b: 255 } | The starting color of color picker | startingRGBA | RGBA | { r: 255, g:255, b: 255, a: 1 } | Starting color of color picker if transparency is enabled | startingHEX | string | no | Starting color of color picker | side | string | 'right' | The position of color picker relative to the cursor

@Outputs()

| Output| Type | Description | |--|--|--|--| | colorPickedRGB | RGB | Outputs the color when it's changed | colorPickedRGBA | RGBA | Outputs the color when it's changed | colorPickedHEX | String | Outputs the color when it's changed

Image Picker and Cropper

| Input | Type | Default | Description | |--|--|--|--| | dialogConfig | ImageCropperDialogConfig | { hasBackdrop: true, backdropClass: 'dark-backdrop', panelClass: 'dialog-panel' } | Configuration data for Cropper Dialog | overlayText | OverlayText | { cancelText: 'Cancel', finishText: 'Finish' } | Finish and cancel text, used for localization | startingHEX | String | no | Starting color of color picker | selectIcon | String | 'add_a_photo' | Icon displayed when hovering over image picker component when image isn't picked. Uses material icons | deselectIcon | String | 'cancel' | Icon displayed when hovering over image picker component when image is picked. Uses material icons | color | String | 'whitesmoke' | Background color of image picker | maxImageSize | Number | 2048000 | Maximum acceptable file/image size measured in bytes. | selectText | String | 'Pick or Drag Image' | Text displayed on image picker before image is picked | deselectText | String | 'Deselect Image' | Text displayed on image picker after image is picked

@Outputs()

| Output| Type | Description | |--|--|--|--| | imageSelected | EventEmitter< Blob > | Emits event when image is selected and returns image. | imageDeselect | EventEmitter< Blob > | Emits event when image is deselected