@syncfusion/ej2-inplace-editor 20.4.38 → 20.4.42

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

@@ -1,128 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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 } = {
-    /* 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

@@ -1,105 +0,0 @@
-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 {
-    const data = [];
-    for (let 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

@@ -1,65 +0,0 @@
-
-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

@@ -1,74 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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';
-    }
-}