@syncfusion/ej2-inplace-editor 19.3.45 → 19.4.38

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

@@ -0,0 +1,129 @@
+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
+    // eslint-disable-next-line
+    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. */
+    // eslint-disable-next-line
+    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.ts

@@ -0,0 +1,49 @@
+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 let modulesList: { [key: string]: string } = {
+     /* eslint-disable */
+    '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
+ */
+// eslint-disable-next-line
+export let localeConstant: { [key: string]: object } = {
+    /* eslint-disable */
+    'Click': { 'editAreaClick': 'Click to edit' },
+    'DblClick': { 'editAreaDoubleClick': 'Double click to edit' },
+    'EditIconClick': { 'editAreaClick': 'Click to edit' }
+    /* eslint-enable */
+};

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

@@ -0,0 +1,106 @@
+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();
+/* eslint-disable */
+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 {
+    var data = [];
+    for (var i = value.length - 1; i >= 0; i--) {
+        data.unshift(["&#", value[i].charCodeAt(0), ";"].join(""));
+    }
+    return data.join("");
+}

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.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);
+    }
+}

package/dist/ts/inplace-editor/modules/color-picker.ts

@@ -0,0 +1,55 @@
+import { ColorPicker as EJ2ColorPicker, ColorPickerModel } from '@syncfusion/ej2-inputs';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `ColorPicker` module is used configure the properties of Color picker type editor.
+ */
+export class ColorPicker implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    public compObj: EJ2ColorPicker = undefined;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.colorModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new EJ2ColorPicker(this.parent.model as ColorPickerModel);
+        this.compObj.appendTo(e.target as HTMLInputElement);
+    }
+
+    public focus(): void {
+        this.compObj.element.focus();
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'Color') {
+            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} - retunrs the string
+     */
+    private getModuleName(): string {
+        return 'color-picker';
+    }
+}

package/dist/ts/inplace-editor/modules/combo-box.ts

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

package/dist/ts/inplace-editor/modules/date-range-picker.ts

@@ -0,0 +1,55 @@
+import { DateRangePicker as EJ2DateRangePicker, DateRangePickerModel } from '@syncfusion/ej2-calendars';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `DateRangePicker` module is used configure the properties of Date range picker type editor.
+ */
+export class DateRangePicker implements IComponent {
+    private base: Base;
+    public compObj: EJ2DateRangePicker = undefined;
+    protected parent: InPlaceEditor;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.dateRangeModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new EJ2DateRangePicker(this.parent.model as DateRangePickerModel);
+        this.compObj.appendTo(e.target as HTMLInputElement);
+    }
+
+    public focus(): void {
+        this.compObj.element.focus();
+    }
+
+    /**
+     * For internal use only - Get the module name.
+     * 
+     * @returns {string} - returns the string
+     */
+    private getModuleName(): string {
+        return 'date-range-picker';
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'DateRange') {
+            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();
+    }
+}

package/dist/ts/inplace-editor/modules/multi-select.ts

@@ -0,0 +1,88 @@
+import { closest, EmitType } from '@syncfusion/ej2-base';
+import { MultiSelect as EJ2MultiSelect, MultiSelectModel, PopupEventArgs } from '@syncfusion/ej2-dropdowns';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `MultiSelect` module is used configure the properties of Multi select type editor.
+ */
+export class MultiSelect implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    private isPopOpen: boolean = false;
+    public compObj: EJ2MultiSelect = undefined;
+    private openEvent: EmitType<PopupEventArgs>;
+    private closeEvent: EmitType<PopupEventArgs>;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.multiSelectModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        const compModel: MultiSelectModel = { ...this.parent.model as MultiSelectModel };
+        this.openEvent = compModel.open;
+        this.closeEvent = compModel.close;
+        compModel.open = this.openHandler.bind(this);
+        compModel.close = this.closeHandler.bind(this);
+        this.compObj = new EJ2MultiSelect(compModel);
+        this.compObj.appendTo(e.target);
+    }
+
+    private openHandler(e: PopupEventArgs): void {
+        this.isPopOpen = true;
+        if (this.openEvent) {
+            this.compObj.setProperties({ open: this.openEvent }, true);
+            this.compObj.trigger('open', e);
+        }
+    }
+
+    private closeHandler(e: PopupEventArgs): void {
+        this.isPopOpen = false;
+        if (this.closeEvent) {
+            this.compObj.setProperties({ close: this.closeEvent }, true);
+            this.compObj.trigger('close', e);
+        }
+    }
+
+    public focus(): void {
+        if (!this.isPopOpen) {
+            const evt: MouseEvent = document.createEvent('MouseEvent') as MouseEvent;
+            evt.initEvent('mousedown', true, true);
+            (closest(this.compObj.element, '.e-multi-select-wrapper') as HTMLElement).dispatchEvent(evt);
+        }
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'MultiSelect') {
+            this.parent.setProperties({ value: this.compObj.value }, true);
+            this.parent.extendModelValue(this.compObj.value);
+        }
+    }
+
+    public getRenderValue(): void {
+        this.parent.printValue = this.compObj.text;
+    }
+
+    /**
+     * 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 'multi-select';
+    }
+}