primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
330 lines (325 loc) • 10.5 kB
TypeScript
import * as i0 from '@angular/core';
import { OnDestroy, AfterViewInit, EventEmitter, ElementRef } from '@angular/core';
import { AnimationEvent } from '@angular/animations';
import { cn } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { OverlayService } from 'primeng/api';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import * as _primeuix_styled from '@primeuix/styled';
import { BaseStyle } from 'primeng/base';
/**
* Custom change event.
* @see {@link ColorPicker.onChange}
* @group Events
*/
interface ColorPickerChangeEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Selected color value.
*/
value: string | object;
}
/**
*
* ColorPicker groups a collection of contents in tabs.
*
* [Live Demo](https://www.primeng.org/colorpicker/)
*
* @module colorpickerstyle
*
*/
declare enum ColorPickerClasses {
/**
* Class name of the root element
*/
root = "p-colorpicker",
/**
* Class name of the preview element
*/
preview = "p-colorpicker-preview",
/**
* Class name of the panel element
*/
panel = "p-colorpicker-panel",
/**
* Class name of the color selector element
*/
colorSelector = "p-colorpicker-color-selector",
/**
* Class name of the color background element
*/
colorBackground = "p-colorpicker-color-background",
/**
* Class name of the color handle element
*/
colorHandle = "p-colorpicker-color-handle",
/**
* Class name of the hue element
*/
hue = "p-colorpicker-hue",
/**
* Class name of the hue handle element
*/
hueHandle = "p-colorpicker-hue-handle"
}
declare class ColorPickerStyle extends BaseStyle {
name: string;
theme: _primeuix_styled.StyleType;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-colorpicker-overlay': boolean;
'p-colorpicker-dragging': any;
})[];
preview: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
panel: ({ instance }: {
instance: any;
}) => (string | {
'p-colorpicker-panel-inline': any;
'p-disabled': any;
})[];
content: string;
colorSelector: string;
colorBackground: string;
colorHandle: string;
hue: string;
hueHandle: string;
};
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerStyle, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ColorPickerStyle>;
}
interface ColorPickerStyle extends BaseStyle {
}
declare const COLORPICKER_VALUE_ACCESSOR: any;
/**
* ColorPicker groups a collection of contents in tabs.
* @group Components
*/
declare class ColorPicker extends BaseEditableHolder implements OnDestroy, AfterViewInit {
overlayService: OverlayService;
/**
* Style class of the component.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass: string | undefined;
/**
* Whether to display as an overlay or not.
* @group Props
*/
inline: boolean | undefined;
/**
* Format to use in value binding.
* @group Props
*/
format: 'hex' | 'rgb' | 'hsb';
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: string | undefined;
/**
* Identifier of the focus input to match a label defined for the dropdown.
* @group Props
*/
inputId: string | undefined;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex: boolean;
/**
* Transition options of the show animation.
* @group Props
*/
showTransitionOptions: string;
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions: string;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: boolean | undefined;
/**
* Default color to display initially when model value is not present.
* @group Props
*/
defaultColor: string | undefined;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'self'
* @group Props
*/
appendTo: i0.InputSignal<any>;
/**
* Callback to invoke on value change.
* @param {ColorPickerChangeEvent} event - Custom value change event.
* @group Emits
*/
onChange: EventEmitter<ColorPickerChangeEvent>;
/**
* Callback to invoke on panel is shown.
* @group Emits
*/
onShow: EventEmitter<any>;
/**
* Callback to invoke on panel is hidden.
* @group Emits
*/
onHide: EventEmitter<any>;
inputViewChild: Nullable<ElementRef>;
$appendTo: i0.Signal<any>;
value: any;
inputBgColor: string | undefined;
shown: Nullable<boolean>;
overlayVisible: Nullable<boolean>;
documentClickListener: VoidListener;
documentResizeListener: VoidListener;
documentMousemoveListener: VoidListener;
documentMouseupListener: VoidListener;
documentHueMoveListener: VoidListener;
scrollHandler: Nullable<ConnectedOverlayScrollHandler>;
selfClick: Nullable<boolean>;
colorDragging: Nullable<boolean>;
hueDragging: Nullable<boolean>;
overlay: Nullable<HTMLDivElement>;
colorSelectorViewChild: Nullable<ElementRef>;
colorHandleViewChild: Nullable<ElementRef>;
hueViewChild: Nullable<ElementRef>;
hueHandleViewChild: Nullable<ElementRef>;
_componentStyle: ColorPickerStyle;
constructor(overlayService: OverlayService);
set colorSelector(element: ElementRef);
set colorHandle(element: ElementRef);
set hue(element: ElementRef);
set hueHandle(element: ElementRef);
get ariaLabel(): any;
onHueMousedown(event: MouseEvent): void;
onHueDragStart(event: TouchEvent): void;
onColorDragStart(event: TouchEvent): void;
pickHue(event: MouseEvent | TouchEvent, position?: any): void;
onColorMousedown(event: MouseEvent): void;
onDrag(event: TouchEvent): void;
onDragEnd(): void;
pickColor(event: MouseEvent | TouchEvent, position?: any): void;
getValueToUpdate(): any;
updateModel(): void;
updateColorSelector(): void;
updateUI(): void;
onInputFocus(): void;
show(): void;
onOverlayAnimationStart(event: AnimationEvent): void;
onOverlayAnimationEnd(event: AnimationEvent): void;
appendOverlay(): void;
restoreOverlayAppend(): void;
alignOverlay(): void;
hide(): void;
onInputClick(): void;
togglePanel(): void;
onInputKeydown(event: KeyboardEvent): void;
onOverlayClick(event: MouseEvent): void;
bindDocumentClickListener(): void;
unbindDocumentClickListener(): void;
bindDocumentMousemoveListener(): void;
unbindDocumentMousemoveListener(): void;
bindDocumentMouseupListener(): void;
unbindDocumentMouseupListener(): void;
bindDocumentResizeListener(): void;
unbindDocumentResizeListener(): void;
onWindowResize(): void;
bindScrollListener(): void;
unbindScrollListener(): void;
validateHSB(hsb: {
h: number;
s: number;
b: number;
}): {
h: number;
s: number;
b: number;
};
validateRGB(rgb: {
r: number;
g: number;
b: number;
}): {
r: number;
g: number;
b: number;
};
validateHEX(hex: string): string;
HEXtoRGB(hex: string): {
r: number;
g: number;
b: number;
};
HEXtoHSB(hex: string): {
h: number;
s: number;
b: number;
};
RGBtoHSB(rgb: {
r: number;
g: number;
b: number;
}): {
h: number;
s: number;
b: number;
};
HSBtoRGB(hsb: {
h: number;
s: number;
b: number;
}): {
r: number;
g: number;
b: number;
};
RGBtoHEX(rgb: {
r: number;
g: number;
b: number;
}): string;
HSBtoHEX(hsb: {
h: number;
s: number;
b: number;
}): string;
onOverlayHide(): void;
ngAfterViewInit(): void;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value: any): void;
ngOnDestroy(): void;
protected readonly cn: typeof cn;
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPicker, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColorPicker, "p-colorPicker, p-colorpicker, p-color-picker", never, { "styleClass": { "alias": "styleClass"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "format": { "alias": "format"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "defaultColor": { "alias": "defaultColor"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; "onShow": "onShow"; "onHide": "onHide"; }, never, never, true, never>;
static ngAcceptInputType_inline: unknown;
static ngAcceptInputType_autoZIndex: unknown;
static ngAcceptInputType_autofocus: unknown;
}
declare class ColorPickerModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ColorPickerModule, never, [typeof ColorPicker, typeof i1.SharedModule], [typeof ColorPicker, typeof i1.SharedModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ColorPickerModule>;
}
export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerClasses, ColorPickerModule, ColorPickerStyle };
export type { ColorPickerChangeEvent };