@syncfusion/ej2-inplace-editor 25.2.3 → 26.1.35

package/dist/ts/inplace-editor/base/interface.d.ts

@@ -0,0 +1,117 @@
+import { ButtonModel } from '@syncfusion/ej2-buttons';
+import { ColorPicker, Slider } from '@syncfusion/ej2-inputs';
+import { RichTextEditor } from '@syncfusion/ej2-richtexteditor';
+import { DateRangePicker, TimePicker, DateRange } from '@syncfusion/ej2-calendars';
+import { AutoComplete, ComboBox, MultiSelect, FieldSettingsModel } from '@syncfusion/ej2-dropdowns';
+import { RenderMode } from './inplace-editor';
+/**
+ * Defines component types that can be used in the In-place Editor.
+ *
+ * @hidden
+ */
+export declare type Component = AutoComplete | ColorPicker | ComboBox | DateRangePicker | MultiSelect | RichTextEditor | Slider | TimePicker;
+/**
+ * Provides information about a Notify.
+ */
+export interface NotifyParams {
+    type?: string;
+    module: string;
+    target?: HTMLElement | HTMLInputElement;
+}
+/**
+ * Provides information about a Component.
+ */
+export interface IComponent {
+    showPopup?(): void;
+    compObj: Component;
+    render(e: NotifyParams): void;
+    focus(): void;
+    updateValue(e: NotifyParams): void;
+    refresh?(): void;
+    getRenderValue?(): void;
+}
+/**
+ * Provides information about a Button.
+ */
+export interface IButton {
+    type: string;
+    constant: string;
+    title: object;
+    className: string;
+    model: ButtonModel;
+    container: HTMLElement;
+}
+/**
+ * Provides information about a ActionBegin event.
+ */
+export interface ActionBeginEventArgs {
+    /** Defines the name of the field */
+    data: {
+        [key: string]: string | number;
+    };
+    /** Prevent the submit action. */
+    cancel?: boolean;
+}
+/**
+ * Provides information about a Action event.
+ */
+export interface ActionEventArgs {
+    /** Prevents the current value render in the editor. */
+    cancel?: boolean;
+    /** Defines the data manager action result. */
+    data: object;
+    /** Defines the current editor value */
+    value: string;
+}
+/**
+ * Provides information about a Form event.
+ */
+export interface FormEventArgs {
+    inputName: string;
+    message: string;
+    element: HTMLInputElement;
+    status?: string;
+    errorElement?: HTMLElement;
+}
+/**
+ * Provides information about a Validate event.
+ */
+export interface ValidateEventArgs extends ActionBeginEventArgs {
+    /** Defines form validation error message. */
+    errorMessage: string;
+}
+/**
+ * Provides information about a BeginEdit event.
+ */
+export interface BeginEditEventArgs {
+    /** Specifies whether to cancel the open action of the editor. */
+    cancel?: boolean;
+    /** Specifies whether to cancel the focus action, before open a editor. */
+    cancelFocus?: boolean;
+    /** Defines the current editor mode. */
+    mode?: RenderMode;
+}
+/**
+ * Provides information about the EndEdit event.
+ */
+export interface EndEditEventArgs {
+    /** Defines the type of action ends the edit. */
+    action?: string;
+    /** Specifies whether to cancel the end edit action. */
+    cancel?: boolean;
+    /** Defines the current editor mode. */
+    mode?: RenderMode;
+}
+/**
+ * Provides information about the Change event.
+ */
+export interface ChangeEventArgs {
+    /** Returns the selected item as JSON Object from the AutoComplete/ComboBox/DropDownList data source. */
+    itemData?: FieldSettingsModel;
+    /** Returns the previous selected item as JSON Object from the AutoComplete/ComboBox/DropDownList data source. */
+    previousItemData?: FieldSettingsModel;
+    /** Returns the previous value of integrated component that renders based on the `type` property in the In-place editor. */
+    previousValue: string | string[] | number | number[] | boolean[] | Date | Date[] | DateRange;
+    /** Returns the value of integrated component that renders based on the `type` property in the In-place editor. */
+    value: string | string[] | number | number[] | boolean[] | Date | Date[] | DateRange;
+}

package/dist/ts/inplace-editor/base/interface.ts

@@ -0,0 +1,127 @@
+import { ButtonModel } from '@syncfusion/ej2-buttons';
+import { ColorPicker, Slider } from '@syncfusion/ej2-inputs';
+import { RichTextEditor } from '@syncfusion/ej2-richtexteditor';
+import { DateRangePicker, TimePicker, DateRange } from '@syncfusion/ej2-calendars';
+import { AutoComplete, ComboBox, MultiSelect, FieldSettingsModel } from '@syncfusion/ej2-dropdowns';
+import { RenderMode } from './inplace-editor';
+
+/**
+ * Defines component types that can be used in the In-place Editor.
+ *
+ * @hidden
+ */
+
+export type Component = AutoComplete | ColorPicker | ComboBox | DateRangePicker | MultiSelect | RichTextEditor | Slider | TimePicker;
+
+/**
+ * Provides information about a Notify.
+ */
+export interface NotifyParams {
+    type?: string
+    module: string
+    target?: HTMLElement | HTMLInputElement
+}
+
+/**
+ * Provides information about a Component.
+ */
+export interface IComponent {
+    showPopup?(): void
+    compObj: Component
+    render(e: NotifyParams): void
+    focus(): void
+    updateValue(e: NotifyParams): void
+    refresh?(): void
+    getRenderValue?(): void
+}
+
+/**
+ * Provides information about a Button.
+ */
+export interface IButton {
+    type: string
+    constant: string
+    title: object
+    className: string
+    model: ButtonModel
+    container: HTMLElement
+}
+
+/**
+ * Provides information about a ActionBegin event.
+ */
+export interface ActionBeginEventArgs {
+    /** Defines the name of the field */
+    data: { [key: string]: string | number }
+    /** Prevent the submit action. */
+    cancel?: boolean
+}
+
+/**
+ * Provides information about a Action event.
+ */
+export interface ActionEventArgs {
+    /** Prevents the current value render in the editor. */
+    cancel?: boolean
+    /** Defines the data manager action result. */
+    data: object
+    /** Defines the current editor value */
+    value: string
+}
+
+/**
+ * Provides information about a Form event.
+ */
+export interface FormEventArgs {
+    inputName: string
+    message: string
+    element: HTMLInputElement
+    status?: string
+    errorElement?: HTMLElement
+}
+
+/**
+ * Provides information about a Validate event.
+ */
+export interface ValidateEventArgs extends ActionBeginEventArgs {
+    /** Defines form validation error message. */
+    errorMessage: string
+}
+
+/**
+ * Provides information about a BeginEdit event.
+ */
+export interface BeginEditEventArgs {
+    /** Specifies whether to cancel the open action of the editor. */
+    cancel?: boolean
+    /** Specifies whether to cancel the focus action, before open a editor. */
+    cancelFocus?: boolean
+    /** Defines the current editor mode. */
+    mode?: RenderMode
+}
+
+/**
+ * Provides information about the EndEdit event.
+ */
+export interface EndEditEventArgs {
+    /** Defines the type of action ends the edit. */
+    action?: string
+    /** Specifies whether to cancel the end edit action. */
+    cancel?: boolean
+    /** Defines the current editor mode. */
+    mode?: RenderMode
+}
+
+/**
+ * Provides information about the Change event.
+ */
+export interface ChangeEventArgs {
+    /** Returns the selected item as JSON Object from the AutoComplete/ComboBox/DropDownList data source. */
+    itemData?: FieldSettingsModel
+    /** Returns the previous selected item as JSON Object from the AutoComplete/ComboBox/DropDownList data source. */
+    previousItemData?: FieldSettingsModel
+    /** Returns the previous value of integrated component that renders based on the `type` property in the In-place editor. */
+    previousValue: string | string[] | number | number[] | boolean[] | Date | Date[] | DateRange
+    /** Returns the value of integrated component that renders based on the `type` property in the In-place editor. */
+    value: string | string[] | number | number[] | boolean[] | Date | Date[] | DateRange
+}

package/dist/ts/inplace-editor/base/models-model.d.ts

@@ -0,0 +1,22 @@
+import { ChildProperty, Property } from '@syncfusion/ej2-base';import { TooltipModel } from '@syncfusion/ej2-popups';
+
+/**
+ * Interface for a class PopupSettings
+ */
+export interface PopupSettingsModel {
+
+    /**
+     * Specifies title for the editor popup.
+     *
+     * @default ''
+     */
+    title?: string;
+
+    /**
+     * Specifies model for editor popup customization like position, animation,etc.
+     *
+     * @default null
+     */
+    model?: TooltipModel;
+
+}

package/dist/ts/inplace-editor/base/models.d.ts

@@ -0,0 +1,31 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { TooltipModel } from '@syncfusion/ej2-popups';
+/**
+ * Configures the popup settings of the In-place editor.
+ */
+export declare class PopupSettings extends ChildProperty<PopupSettings> {
+    /**
+     * Specifies title for the editor popup.
+     *
+     * @default ''
+     */
+    title: string;
+    /**
+     * Specifies model for editor popup customization like position, animation,etc.
+     *
+     * @default null
+     */
+    model: TooltipModel;
+}
+/**
+ * @hidden
+ */
+export declare const modulesList: {
+    [key: string]: string;
+};
+/**
+ * @hidden
+ */
+export declare let localeConstant: {
+    [key: string]: object;
+};

package/dist/ts/inplace-editor/base/models.ts

@@ -0,0 +1,45 @@
+import { ChildProperty, Property } from '@syncfusion/ej2-base';
+import { TooltipModel } from '@syncfusion/ej2-popups';
+
+/**
+ * Configures the popup settings of the In-place editor.
+ */
+export class PopupSettings extends ChildProperty<PopupSettings> {
+    /**
+     * Specifies title for the editor popup.
+     *
+     * @default ''
+     */
+    @Property('')
+    public title: string;
+    /**
+     * Specifies model for editor popup customization like position, animation,etc.
+     *
+     * @default null
+     */
+    @Property(null)
+    public model: TooltipModel;
+}
+/**
+ * @hidden
+ */
+export const modulesList: { [key: string]: string } = {
+    'AutoComplete': 'auto-complete',
+    'Color': 'color-picker',
+    'ComboBox': 'combo-box',
+    'DateRange': 'date-range-picker',
+    'MultiSelect': 'multi-select',
+    'RTE': 'rte',
+    'Slider': 'slider',
+    'Time': 'time-picker'
+    /* eslint-enable */
+};
+
+/**
+ * @hidden
+ */
+export let localeConstant: { [key: string]: object } = {
+    'Click': { 'editAreaClick': 'Click to edit' },
+    'DblClick': { 'editAreaDoubleClick': 'Double click to edit' },
+    'EditIconClick': { 'editAreaClick': 'Click to edit' }
+};

package/dist/ts/inplace-editor/base/util.d.ts

@@ -0,0 +1,28 @@
+import { RichTextEditorModel } from '@syncfusion/ej2-richtexteditor';
+import { DatePickerModel } from '@syncfusion/ej2-calendars';
+import { DateTimePickerModel, DateRangePickerModel, TimePickerModel } from '@syncfusion/ej2-calendars';
+import { NumericTextBoxModel, TextBoxModel } from '@syncfusion/ej2-inputs';
+import { ColorPickerModel, MaskedTextBoxModel, SliderModel } from '@syncfusion/ej2-inputs';
+import { AutoCompleteModel, ComboBoxModel, DropDownListModel, MultiSelectModel } from '@syncfusion/ej2-dropdowns';
+declare type valueType = string | number | Date | string[] | Date[] | number[];
+declare type modelType = AutoCompleteModel | ColorPickerModel | ComboBoxModel | DatePickerModel | DateRangePickerModel | DateTimePickerModel | DropDownListModel | MaskedTextBoxModel | MultiSelectModel | NumericTextBoxModel | RichTextEditorModel | SliderModel | TextBoxModel | TimePickerModel;
+/**
+ * @param {string} type - specifies the string type
+ * @param {valueType} val - specifies the value type
+ * @param {modelType} model - specifies the model type
+ * @returns {string} - returns the string
+ */
+export declare function parseValue(type: string, val: valueType, model: modelType): string;
+/**
+ * @param {string} type - specifies the string value
+ * @param {valueType} val - specifies the value type
+ * @returns {valueType} - returns the value type
+ */
+export declare function getCompValue(type: string, val: valueType): valueType;
+/**
+ * @param {string} value - specifies the string value
+ * @returns {string} - returns the string
+ * @hidden
+ */
+export declare function encode(value: string): string;
+export {};

package/dist/ts/inplace-editor/base/util.ts

@@ -0,0 +1,104 @@
+import { isNullOrUndefined as isNOU, Internationalization, isBlazor } from '@syncfusion/ej2-base';
+import { RichTextEditorModel } from '@syncfusion/ej2-richtexteditor';
+import { DatePickerModel } from '@syncfusion/ej2-calendars';
+import { DateTimePickerModel, DateRangePickerModel, TimePickerModel } from '@syncfusion/ej2-calendars';
+import { NumericTextBoxModel, TextBoxModel } from '@syncfusion/ej2-inputs';
+import { ColorPickerModel, MaskedTextBoxModel, SliderModel } from '@syncfusion/ej2-inputs';
+import { AutoCompleteModel, ComboBoxModel, DropDownListModel, MultiSelectModel } from '@syncfusion/ej2-dropdowns';
+/**
+ * Exports util methods used by In-place editor.
+ */
+
+const intl: Internationalization = new Internationalization();
+type valueType = string | number | Date | string[] | Date[] | number[];
+type modelType = AutoCompleteModel | ColorPickerModel | ComboBoxModel | DatePickerModel | DateRangePickerModel | DateTimePickerModel |
+/* eslint-enable */
+DropDownListModel | MaskedTextBoxModel | MultiSelectModel | NumericTextBoxModel | RichTextEditorModel | SliderModel | TextBoxModel |
+TimePickerModel;
+/**
+ * @param {string} type - specifies the string type
+ * @param {valueType} val - specifies the value type
+ * @param {modelType} model - specifies the model type
+ * @returns {string} - returns the string
+ */
+export function parseValue(type: string, val: valueType, model: modelType): string {
+    if (isNOU(val) || val === '') {
+        return '';
+    }
+    let result: string;
+    let tempFormat: string;
+    switch (type) {
+    case 'Color': {
+        const hex: string = <string>val;
+        result = (hex.length > 7) ? hex.slice(0, -2) : hex;
+        break; }
+    case 'Date':
+        tempFormat = (model as DatePickerModel).format as string;
+        result = intl.formatDate(<Date>val, { format: tempFormat, type: type, skeleton: isBlazor() ? 'd' : 'yMd' });
+        break;
+    case 'DateRange': {
+        tempFormat = (model as DateRangePickerModel).format as string;
+        const date: Date[] = <Date[]>val;
+        result = intl.formatDate(date[0], { format: tempFormat, type: type, skeleton: isBlazor() ? 'd' : 'yMd' }) + ' - '
+            + intl.formatDate(date[1], { format: tempFormat, type: type, skeleton: isBlazor() ? 'd' : 'yMd' });
+        break; }
+    case 'DateTime':
+        tempFormat = (model as DateTimePickerModel).format as string;
+        if (isNOU(tempFormat) || tempFormat === '') {
+            result = intl.formatDate(<Date>val, { format: tempFormat, type: type, skeleton: isBlazor() ? 'd' : 'yMd' }) + ' '
+                + intl.formatDate(<Date>val, { format: tempFormat, type: type, skeleton: isBlazor() ? 't' : 'hm' });
+        } else {
+            result = intl.formatDate(<Date>val, { format: tempFormat, type: type, skeleton: isBlazor() ? 'd' : 'yMd' });
+        }
+        break;
+    case 'Time':
+        tempFormat = (model as TimePickerModel).format as string;
+        result = intl.formatDate(<Date>val, { format: tempFormat, type: type, skeleton: isBlazor() ? 't' : 'hm' });
+        break;
+    case 'Numeric': {
+        tempFormat = isNOU((model as NumericTextBoxModel).format) ? 'n2' :
+            (model as NumericTextBoxModel).format as string;
+        const tempVal: number = isNOU(<string>val) ? null : (typeof (val) === 'number' ? val : intl.parseNumber(<string>val));
+        result = intl.formatNumber(tempVal, { format: tempFormat });
+        break; }
+    default:
+        result = val.toString();
+        break;
+    }
+    return result;
+}
+
+/**
+ * @param {string} type - specifies the string value
+ * @param {valueType} val - specifies the value type
+ * @returns {valueType} - returns the value type
+ */
+export function getCompValue(type: string, val: valueType): valueType {
+    if (isNOU(val) || val === '') {
+        return val;
+    }
+    if ((type === 'Date' || type === 'Time' || type === 'DateTime') && typeof (val) === 'string') {
+        val = new Date(val);
+    } else if (type === 'DateRange') {
+        if (typeof (val) === 'object' && typeof ((<string[]>val)[0]) === 'string') {
+            val = [new Date((val as string[])[0]), new Date((val as string[])[1])];
+        } else if (typeof (val) === 'string') {
+            const temp: string[] = (<string>val).split('-');
+            val = [new Date(temp[0]), new Date(temp[1])];
+        }
+    }
+    return val;
+}
+
+/**
+ * @param {string} value - specifies the string value
+ * @returns {string} - returns the string
+ * @hidden
+ */
+export function encode(value: string): string {
+    const data : string[] = [];
+    for (let i : number = value.length - 1; i >= 0; i--) {
+        data.unshift(['&#', value[i as number].charCodeAt(0), ';'].join(''));
+    }
+    return data.join('');
+}

package/dist/ts/inplace-editor/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ */
+export * from './base/index';
+export * from './modules/index';

package/dist/ts/inplace-editor/index.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ */
+export * from './base/index';
+export * from './modules/index';

package/dist/ts/inplace-editor/modules/auto-complete.d.ts

@@ -0,0 +1,34 @@
+import { AutoComplete as EJ2AutoComplete } from '@syncfusion/ej2-dropdowns';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+/**
+ * The `AutoComplete` module is used configure the properties of Auto complete type editor.
+ */
+export declare class AutoComplete implements IComponent {
+    private base;
+    protected parent: InPlaceEditor;
+    compObj: EJ2AutoComplete;
+    constructor(parent?: InPlaceEditor);
+    render(e: NotifyParams): void;
+    /**
+     * @hidden
+     * @returns {void}
+     */
+    showPopup(): void;
+    focus(): void;
+    updateValue(e: NotifyParams): void;
+    /**
+     * Destroys the module.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+     */
+    destroy(): void;
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string
+     */
+    private getModuleName;
+}

package/dist/ts/inplace-editor/modules/auto-complete.ts

@@ -0,0 +1,65 @@
+
+import { AutoComplete as EJ2AutoComplete, AutoCompleteModel } from '@syncfusion/ej2-dropdowns';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `AutoComplete` module is used configure the properties of Auto complete type editor.
+ */
+export class AutoComplete implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    public compObj: EJ2AutoComplete = undefined;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.atcModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new EJ2AutoComplete(this.parent.model as AutoCompleteModel);
+        this.compObj.appendTo(e.target);
+    }
+
+    /**
+     * @hidden
+     * @returns {void}
+     */
+    public showPopup(): void {
+        this.compObj.focusIn();
+        this.compObj.showPopup();
+    }
+
+    public focus(): void {
+        this.compObj.element.focus();
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'AutoComplete') {
+            this.parent.setProperties({ value: this.compObj.value }, true);
+            this.parent.extendModelValue(this.compObj.value);
+        }
+    }
+
+    /**
+     * Destroys the module.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+     */
+    public destroy(): void {
+        this.base.destroy();
+    }
+
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string
+     */
+    private getModuleName(): string {
+        return 'auto-complete';
+    }
+}

package/dist/ts/inplace-editor/modules/base-module.d.ts

@@ -0,0 +1,19 @@
+import { InPlaceEditor } from '../base/inplace-editor';
+import { IComponent } from '../base/interface';
+/**
+ * The `Base` module.
+ */
+export declare class Base {
+    protected parent: InPlaceEditor;
+    protected module: IComponent;
+    constructor(parent: InPlaceEditor, module: IComponent);
+    private render;
+    private showPopup;
+    private focus;
+    private update;
+    private getValue;
+    private destroyComponent;
+    destroy(): void;
+    protected addEventListener(): void;
+    protected removeEventListener(): void;
+}

package/dist/ts/inplace-editor/modules/base-module.ts

@@ -0,0 +1,74 @@
+import { InPlaceEditor } from '../base/inplace-editor';
+import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import * as events from '../base/events';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `Base` module.
+ */
+export class Base {
+    protected parent: InPlaceEditor;
+    protected module: IComponent;
+
+    public constructor(parent: InPlaceEditor, module: IComponent) {
+        this.parent = parent;
+        this.module = module;
+        this.addEventListener();
+    }
+
+    private render(e: NotifyParams): void {
+        this.module.render(e);
+    }
+
+    private showPopup(): void {
+        this.module.showPopup();
+    }
+
+    private focus(): void {
+        this.module.focus();
+    }
+
+    private update(e: NotifyParams): void {
+        this.module.updateValue(e);
+    }
+
+    private getValue(): void {
+        this.module.getRenderValue();
+    }
+
+    private destroyComponent(): void {
+        if (isNOU(this.module.compObj)) {
+            return;
+        }
+        this.module.compObj.destroy();
+        this.module.compObj = undefined;
+    }
+
+    public destroy(): void {
+        this.destroyComponent();
+        this.removeEventListener();
+    }
+
+    protected addEventListener(): void {
+        this.parent.on(events.render, this.render, this);
+        this.parent.on(events.setFocus, this.focus, this);
+        this.parent.on(events.showPopup, this.showPopup, this);
+        this.parent.on(events.update, this.update, this);
+        this.parent.on(events.accessValue, this.getValue, this);
+        this.parent.on(events.destroyModules, this.destroyComponent, this);
+        this.parent.on(events.destroy, this.destroy, this);
+    }
+
+    protected removeEventListener(): void {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.off(events.render, this.render);
+        this.parent.off(events.setFocus, this.focus);
+        this.parent.off(events.showPopup, this.showPopup);
+        this.parent.off(events.update, this.update);
+        this.parent.off(events.accessValue, this.getValue);
+        this.parent.off(events.destroyModules, this.destroyComponent);
+        this.parent.off(events.destroy, this.destroy);
+    }
+}