Package Exports
- nxt-color-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nxt-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Angular Color Picker
This is a responsive color picker based on angular2-color-picker and updates from ngx-color-picker.
Why another rewrite?
- Responsive: nxt-color-picker uses CSS and flex layout to ensure pixel-perfect rendering on all screen sizes and resolutions
- UX improvements:
- slider indicator changes color based on background to maintain visibility
- preset colours show alpha
- proper support for mobile browsers
- Type safe: by replacing string options with enumerators, compiler can ensure you always pass correct options to nxt-color-picker
- Built with Angular CLI to make nxt-color-picker development and testing a single-step process
Quick links
Building the library
yarn
yarn build
Running the app
yarn
yarn start
Installing and usage
yarn add nxt-color-picker
Load the module for your app:
import { ColorPickerModule } from 'nxt-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
})
Use it in your HTML template:
<input [(cpColor)]="color" [style.background]="color"/>
[cpColor] // The color to show in the color picker dialog.
[cpWidth] // Use this option to set color picker dialog width ('230px').
[cpHeight] // Use this option to force color picker dialog height ('auto').
[cpToggle] // Sets the default open / close state of the color picker (false).
[cpDisabled] // Disables opening of the color picker dialog via toggle / events.
[cpMode] // Dialog color mode: 'color', 'grayscale', 'presets' ('color').
[cpOutputFormat] // Output color format: OutputFormat (OutputFormat.auto).
[cpAlphaChannel] // Alpha mode: AlphaChannel (AlphaChannel.enabled).
[cpFallbackColor] // Used when the color is not well-formed or is undefined ('#000').
[cpPosition] // Dialog position: DialogPosition (DialogPosition.right).
[cpPositionOffset] // Dialog offset percentage relative to the directive element (0%).
[cpPositionRelativeToArrow] // Dialog position is calculated relative to dialog arrow (false).
[cpPresetLabel] // Label text for the preset colors if any provided ('Preset colors').
[cpPresetColors] // Array of preset colors to show in the color picker dialog ([]).
[cpDisableInput] // Disables / hides the color input field from the dialog (false).
[cpDialogDisplay] // Dialog positioning mode: DialogDisplay (DialogDisplay.popup).
// DialogDisplay.popup: dialog is shown as popup (fixed positioning).
// DialogDisplay.inline: dialog is shown permanently (static positioning).
[cpIgnoredElements] // Array of HTML elements that will be ignored when clicked ([]).
[cpSaveClickOutside] // Save currently selected color when user clicks outside (true).
[cpCloseClickOutside] // Close the color picker dialog when user clicks outside (true).
[cpOKButton] // Show an OK / Apply button which saves the color (false).
[cpOKButtonText] // Button label text shown inside the OK / Apply button ('OK').
[cpCancelButton] // Show a Cancel / Reset button which resets the color (false).
[cpCancelButtonText] // Button label text shown inside the Cancel / Reset button ('Cancel').
[cpAddColorButton] // Show an Add Color button which add the color into preset (false).
[cpAddColorButtonText] // Button label text shown inside the Add Color button ('Add color to preset').
[cpRemoveColorButtonText] // Button label text shown inside the Remove Color button ('Remove Color').
[cpMaxPresetColors] // Use this option to set the max colors allowed in presets (6).
[cpUseRootViewContainer] // Create dialog component in the root view container (false).
// Note: The root component needs to have public viewContainerRef.
(cpOpen) // Current color value, send when dialog is opened (value: string).
(cpClose) // Current color value, send when dialog is closed (value: string).
(cpInputChange) // Input name and its value, send when user changes color through inputs (value: InputChangeEvent).
(cpToggleChange) // Status of the dialog, send when dialog is opened / closed (open: boolean).
(cpSliderDragStart) // Slider name and current color, send when slider dragging starts (value: SliderChangeEvent).
(cpSliderChange) // Slider name and its value, send when user changes color through slider (value: SliderChangeEvent).
(cpSliderDragEnd) // Slider name and current color, send when slider dragging ends (value: SliderChangeEvent).
(cpColorSelectCancel) // Color select canceled, send when Cancel button is pressed (void).
(cpColorSelect) // Selected color value, send when OK button pressed or user clicks outside (if cpSaveClickOutside is true). (value: string).
(cpColorChange) // Changed color value, send when color is changed (value: string).
(cpPresetColorsChange) // Preset colors, send when 'Add Color' button is pressed (value: array).
Available control / helper functions (provided by the directive):
openDialog() // Opens the color picker dialog if not already open.
closeDialog() // Closes the color picker dialog if not already closed.