@syncfusion/ej2-inputs 30.2.4 → 31.1.17

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ts/color-picker/color-picker-model.d.ts

@@ -0,0 +1,186 @@
+import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
+import {ColorPickerMode,ColorPickerEventArgs,PaletteTileEventArgs,BeforeOpenCloseEventArgs,OpenEventArgs,ModeSwitchEventArgs} from "./color-picker";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class ColorPicker
+ */
+export interface ColorPickerModel extends ComponentModel{
+
+    /**
+     * It is used to set the color value for ColorPicker. It should be specified as Hex code.
+     *
+     * @default '#008000ff'
+     */
+    value?: string;
+
+    /**
+     * This property sets the CSS classes to root element of the ColorPicker
+     *  which helps to customize the UI styles.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * It is used to render the ColorPicker with the specified mode.
+     *
+     * @default 'Picker'
+     */
+    mode?: ColorPickerMode;
+
+    /**
+     * It is used to show / hide the mode switcher button of ColorPicker component.
+     *
+     * @default true
+     */
+    modeSwitcher?: boolean;
+
+    /**
+     * It is used to load custom colors to palette.
+     *
+     * @default null
+     */
+    presetColors?: { [key: string]: string[] };
+
+    /**
+     * It is used to show / hide the control buttons (apply / cancel) of  ColorPicker component.
+     *
+     * @default true
+     */
+    showButtons?: boolean;
+
+    /**
+     * It is used to render the ColorPicker palette with specified columns.
+     *
+     * @default 10
+     */
+    columns?: number;
+
+    /**
+     * It is used to render the ColorPicker component as inline.
+     *
+     * @default false
+     */
+    inline?: boolean;
+
+    /**
+     * It is used to enable / disable the no color option of ColorPicker component.
+     *
+     * @default false
+     */
+    noColor?: boolean;
+
+    /**
+     * To enable or disable persisting component's state between page reloads and it is extended from component class.
+     *
+     * @default false
+     */
+    enablePersistence?: boolean;
+
+    /**
+     * It is used to enable / disable the opacity option of ColorPicker component.
+     *
+     * @default true
+     */
+    enableOpacity?: boolean;
+
+    /**
+     * Specifies the popup element creation on open.
+     *
+     * @default false
+     */
+    createPopupOnClick?: boolean;
+
+    /**
+     * Specifies to show the recent color options in the color picker in the palate mode.
+     * It accepts boolean value to configure recent colors. The default value is false.
+     * If this property value is false, then the recent color user interface is not rendered in color picker component.
+     * This recent color option is rendered only in the palette mode.
+     *
+     * @default false
+     */
+    showRecentColors?: boolean;
+
+    /**
+     * Triggers while selecting the color in picker / palette, when showButtons property is enabled.
+     *
+     * @event select
+     * @blazorProperty 'Selected'
+     */
+    select?: EmitType<ColorPickerEventArgs>;
+
+    /**
+     * Triggers while changing the colors. It will be triggered based on the showButtons property.
+     * If the property is false, the event will be triggered while selecting the colors.
+     * If the property is true, the event will be triggered while apply the selected color.
+     *
+     * @event change
+     * @blazorProperty 'ValueChange'
+     */
+    change?: EmitType<ColorPickerEventArgs>;
+
+    /**
+     * Trigger while rendering each palette tile.
+     *
+     * @event beforeTileRender
+     * @blazorProperty 'OnTileRender'
+     */
+    beforeTileRender?: EmitType<PaletteTileEventArgs>;
+
+    /**
+     * Triggers before opening the ColorPicker popup.
+     *
+     * @event beforeOpen
+     * @blazorProperty 'OnOpen'
+     */
+    beforeOpen?: EmitType<BeforeOpenCloseEventArgs>;
+
+    /**
+     * Triggers while opening the ColorPicker popup.
+     *
+     * @event open
+     * @blazorProperty 'Opened'
+     */
+    open?: EmitType<OpenEventArgs>;
+
+    /**
+     * Triggers before closing the ColorPicker popup.
+     *
+     * @event beforeClose
+     * @blazorProperty 'OnClose'
+     */
+    beforeClose?: EmitType<BeforeOpenCloseEventArgs>;
+
+    /**
+     * Triggers before Switching between ColorPicker mode.
+     *
+     * @event beforeModeSwitch
+     * @blazorProperty 'OnModeSwitch'
+     */
+    beforeModeSwitch?: EmitType<ModeSwitchEventArgs>;
+
+    /**
+     * Triggers after Switching between ColorPicker mode.
+     *
+     * @event onModeSwitch
+     * @blazorProperty 'ModeSwitched'
+     */
+    onModeSwitch?: EmitType<ModeSwitchEventArgs>;
+
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
+
+}

package/dist/ts/color-picker/color-picker.d.ts

@@ -0,0 +1,398 @@
+import { BaseEventArgs, Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { ColorPickerModel } from './color-picker-model';
+/**
+ * Defines the ColorPicker Mode
+ * ```props
+ * Picker :- Specifies that the ColorPicker component should be rendered with the picker mode.
+ * Palette :- Specifies that the ColorPicker component should be rendered with the palette mode.
+ * ```
+ */
+export declare type ColorPickerMode = 'Picker' | 'Palette';
+/**
+ * ColorPicker component is a user interface to select and adjust color values. It provides supports for various
+ * color specification like Red Green Blue, Hue Saturation Value and Hex codes.
+ * ```html
+ * <input type="color" id="color-picker">
+ * ```
+ * ```typescript
+ * <script>
+ *   let colorPickerObj: ColorPicker = new ColorPicker(null , "#color-picker");
+ * </script>
+ * ```
+ */
+export declare class ColorPicker extends Component<HTMLInputElement> implements INotifyPropertyChanged {
+    private splitBtn;
+    private hueSlider;
+    private opacitySlider;
+    private tooltipEle;
+    private container;
+    private modal;
+    private isRgb;
+    private l10n;
+    private tileRipple;
+    private ctrlBtnRipple;
+    private clientX;
+    private clientY;
+    private rgb;
+    private hsv;
+    private formElement;
+    private initialInputValue;
+    private recentColors;
+    /**
+     * It is used to set the color value for ColorPicker. It should be specified as Hex code.
+     *
+     * @default '#008000ff'
+     */
+    value: string;
+    /**
+     * This property sets the CSS classes to root element of the ColorPicker
+     *  which helps to customize the UI styles.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * It is used to render the ColorPicker with the specified mode.
+     *
+     * @default 'Picker'
+     */
+    mode: ColorPickerMode;
+    /**
+     * It is used to show / hide the mode switcher button of ColorPicker component.
+     *
+     * @default true
+     */
+    modeSwitcher: boolean;
+    /**
+     * It is used to load custom colors to palette.
+     *
+     * @default null
+     */
+    presetColors: {
+        [key: string]: string[];
+    };
+    /**
+     * It is used to show / hide the control buttons (apply / cancel) of  ColorPicker component.
+     *
+     * @default true
+     */
+    showButtons: boolean;
+    /**
+     * It is used to render the ColorPicker palette with specified columns.
+     *
+     * @default 10
+     */
+    columns: number;
+    /**
+     * It is used to render the ColorPicker component as inline.
+     *
+     * @default false
+     */
+    inline: boolean;
+    /**
+     * It is used to enable / disable the no color option of ColorPicker component.
+     *
+     * @default false
+     */
+    noColor: boolean;
+    /**
+     * To enable or disable persisting component's state between page reloads and it is extended from component class.
+     *
+     * @default false
+     */
+    enablePersistence: boolean;
+    /**
+     * It is used to enable / disable the opacity option of ColorPicker component.
+     *
+     * @default true
+     */
+    enableOpacity: boolean;
+    /**
+     * Specifies the popup element creation on open.
+     *
+     * @default false
+     */
+    createPopupOnClick: boolean;
+    /**
+     * Specifies to show the recent color options in the color picker in the palate mode.
+     * It accepts boolean value to configure recent colors. The default value is false.
+     * If this property value is false, then the recent color user interface is not rendered in color picker component.
+     * This recent color option is rendered only in the palette mode.
+     *
+     * @default false
+     */
+    showRecentColors: boolean;
+    /**
+     * Triggers while selecting the color in picker / palette, when showButtons property is enabled.
+     *
+     * @event select
+     * @blazorProperty 'Selected'
+     */
+    select: EmitType<ColorPickerEventArgs>;
+    /**
+     * Triggers while changing the colors. It will be triggered based on the showButtons property.
+     * If the property is false, the event will be triggered while selecting the colors.
+     * If the property is true, the event will be triggered while apply the selected color.
+     *
+     * @event change
+     * @blazorProperty 'ValueChange'
+     */
+    change: EmitType<ColorPickerEventArgs>;
+    /**
+     * Trigger while rendering each palette tile.
+     *
+     * @event beforeTileRender
+     * @blazorProperty 'OnTileRender'
+     */
+    beforeTileRender: EmitType<PaletteTileEventArgs>;
+    /**
+     * Triggers before opening the ColorPicker popup.
+     *
+     * @event beforeOpen
+     * @blazorProperty 'OnOpen'
+     */
+    beforeOpen: EmitType<BeforeOpenCloseEventArgs>;
+    /**
+     * Triggers while opening the ColorPicker popup.
+     *
+     * @event open
+     * @blazorProperty 'Opened'
+     */
+    open: EmitType<OpenEventArgs>;
+    /**
+     * Triggers before closing the ColorPicker popup.
+     *
+     * @event beforeClose
+     * @blazorProperty 'OnClose'
+     */
+    beforeClose: EmitType<BeforeOpenCloseEventArgs>;
+    /**
+     * Triggers before Switching between ColorPicker mode.
+     *
+     * @event beforeModeSwitch
+     * @blazorProperty 'OnModeSwitch'
+     */
+    beforeModeSwitch: EmitType<ModeSwitchEventArgs>;
+    /**
+     * Triggers after Switching between ColorPicker mode.
+     *
+     * @event onModeSwitch
+     * @blazorProperty 'ModeSwitched'
+     */
+    onModeSwitch: EmitType<ModeSwitchEventArgs>;
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     * @blazorProperty 'Created'
+     */
+    created: EmitType<Event>;
+    constructor(options?: ColorPickerModel, element?: string | HTMLInputElement);
+    protected preRender(): void;
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    render(): void;
+    private initWrapper;
+    private getWrapper;
+    private createWidget;
+    private createSplitBtn;
+    private onOpen;
+    private getPopupInst;
+    private bindCallBackEvent;
+    private onPopupClose;
+    private createPalette;
+    private renderRecentColor;
+    private firstPaletteFocus;
+    private appendPalette;
+    private setNoColor;
+    private appendElement;
+    private addTileSelection;
+    private createPicker;
+    private setHsvContainerBg;
+    private getHsvContainer;
+    private setHandlerPosition;
+    private createSlider;
+    private createOpacitySlider;
+    private updateOpacitySliderBg;
+    private hueChange;
+    private opacityChange;
+    private updateOpacityInput;
+    private createPreview;
+    private isPicker;
+    private getPopupEle;
+    private createNumericInput;
+    private createInput;
+    private appendOpacityValue;
+    private appendValueSwitchBtn;
+    private createCtrlBtn;
+    private appendModeSwitchBtn;
+    private createDragTooltip;
+    private getTooltipInst;
+    private setTooltipOffset;
+    private toggleDisabled;
+    private convertToRgbString;
+    private convertToHsvString;
+    private updateHsv;
+    private convertToOtherFormat;
+    private updateInput;
+    private updatePreview;
+    private getDragHandler;
+    private removeTileSelection;
+    private convertRgbToNumberArray;
+    /**
+     * To get color value in specified type.
+     *
+     * @param {string} value - Specify the color value.
+     * @param {string} type - Specify the type to which the specified color needs to be converted.
+     * @method getValue
+     * @returns {string} - Color value
+     */
+    getValue(value?: string, type?: string): string;
+    /**
+     * To show/hide ColorPicker popup based on current state of the SplitButton.
+     *
+     * @method toggle
+     * @returns {void}
+     */
+    toggle(): void;
+    /**
+     * Get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName(): string;
+    /**
+     * Gets the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    getPersistData(): string;
+    protected wireEvents(): void;
+    private formResetHandler;
+    private addCtrlSwitchEvent;
+    private ctrlBtnKeyDown;
+    private pickerKeyDown;
+    private enterKeyHandler;
+    private closePopup;
+    private triggerChangeEvent;
+    private handlerDragPosition;
+    private handlerDown;
+    private handlerMove;
+    private setHsv;
+    private handlerEnd;
+    private btnClickHandler;
+    private switchToPalette;
+    private refreshImageEditorPopupPos;
+    private refreshPopupPos;
+    private formatSwitchHandler;
+    private updateValue;
+    private previewHandler;
+    private paletteClickHandler;
+    private noColorTile;
+    private switchToPicker;
+    private ctrlBtnClick;
+    private paletteKeyDown;
+    private keySelectionChanges;
+    private tilePosition;
+    private inputHandler;
+    private inputValueChange;
+    private triggerEvent;
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers.
+     * Also it maintains the initial input element from the DOM.
+     *
+     * @method destroy
+     * @returns {void}
+     */
+    destroy(): void;
+    private destroyOtherComp;
+    private isPopupOpen;
+    protected unWireEvents(): void;
+    private roundValue;
+    private hexToRgb;
+    private rgbToHsv;
+    private hsvToRgb;
+    private rgbToHex;
+    private hex;
+    private changeModeSwitcherProp;
+    private changeShowBtnProps;
+    private changeValueProp;
+    private setInputEleProps;
+    private changeDisabledProp;
+    private changeCssClassProps;
+    private changeRtlProps;
+    private changePaletteProps;
+    private changeOpacityProps;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {ColorPickerModel} newProp - Specifies new properties
+     * @param  {ColorPickerModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp: ColorPickerModel, oldProp: ColorPickerModel): void;
+    /**
+     * Sets the focus to Colorpicker
+     * its native method
+     *
+     * @public
+     * @returns {void}
+     */
+    focusIn(): void;
+}
+/**
+ * Interface for change / select event.
+ */
+export interface ColorPickerEventArgs extends BaseEventArgs {
+    currentValue: {
+        hex: string;
+        rgba: string;
+    };
+    previousValue: {
+        hex: string;
+        rgba: string;
+    };
+    value?: string;
+    event?: Event;
+}
+/**
+ * Interface for before change event.
+ */
+export interface PaletteTileEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    presetName: string;
+    value: string;
+}
+/**
+ * Interface for before open / close event.
+ */
+export interface BeforeOpenCloseEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    event: Event;
+    cancel: boolean;
+}
+/**
+ * Interface for open event.
+ */
+export interface OpenEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+}
+/**
+ * Interface for mode switching event.
+ */
+export interface ModeSwitchEventArgs extends BaseEventArgs {
+    element: HTMLElement;
+    mode: string;
+}