@syncfusion/ej2-inplace-editor 30.2.4 → 31.1.17

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

@@ -0,0 +1,344 @@
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property, Event, EmitType, select } from '@syncfusion/ej2-base';import { detach, addClass, removeClass, EventHandler, setStyleAttribute, Complex, ModuleDeclaration } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, closest, extend, L10n, compile, Browser, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { updateBlazorTemplate, resetBlazorTemplate, SanitizeHtmlHelper, getValue, isBlazor } from '@syncfusion/ej2-base';import { DataManager, UrlAdaptor, Query, WebApiAdaptor, ODataV4Adaptor, ReturnOption, Predicate } from '@syncfusion/ej2-data';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { RichTextEditorModel } from '@syncfusion/ej2-richtexteditor';import { DatePicker, DatePickerModel, DateTimePicker, DateRange, RangeEventArgs } from '@syncfusion/ej2-calendars';import { DateTimePickerModel, DateRangePickerModel, TimePickerModel } from '@syncfusion/ej2-calendars';import { createSpinner, hideSpinner, SpinnerArgs, showSpinner} from '@syncfusion/ej2-popups';import { Tooltip, TooltipEventArgs, TipPointerPosition } from '@syncfusion/ej2-popups';import { NumericTextBox, NumericTextBoxModel, TextBox, TextBoxModel, SliderChangeEventArgs, ValidArgs } from '@syncfusion/ej2-inputs';import { ColorPickerModel, FormValidator, MaskedTextBox, MaskedTextBoxModel, SliderModel } from '@syncfusion/ej2-inputs';import { ChangeEventArgs as InputChangeEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';import { AutoCompleteModel, ComboBoxModel, DropDownList, DropDownListModel, MultiSelectModel } from '@syncfusion/ej2-dropdowns';import { MultiSelectChangeEventArgs, ChangeEventArgs as DropDownsChangeEventArgs } from '@syncfusion/ej2-dropdowns';import { Rte } from '../modules/rte';import { Slider } from '../modules/slider';import { ComboBox } from '../modules/combo-box';import { TimePicker } from '../modules/time-picker';import { MultiSelect } from '../modules/multi-select';import { ColorPicker } from '../modules/color-picker';import { AutoComplete } from '../modules/auto-complete';import { DateRangePicker } from '../modules/date-range-picker';import * as events from './events';import * as classes from './classes';import { PopupSettings, modulesList, localeConstant } from './models';import { PopupSettingsModel } from './models-model';import { ActionBeginEventArgs, ActionEventArgs, FormEventArgs, ValidateEventArgs, IButton, BeginEditEventArgs } from './interface';import { ChangeEventArgs, EndEditEventArgs } from './interface';import { parseValue, getCompValue, encode } from './util';
+import {RenderMode,AdaptorType,InputType,EditableType,textOptionType,ActionBlur,BeforeSanitizeHtmlArgs} from "./inplace-editor";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class InPlaceEditor
+ */
+export interface InPlaceEditorModel extends ComponentModel{
+
+    /**
+     * Specifies the name of the field which is used to map data to the server.
+     * If name is not given, then component ID is taken as mapping field name.
+     *
+     * {% codeBlock src='inplace-editor/name/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    name?: string;
+
+    /**
+     * Specifies the display value for input when original input value is empty.
+     *
+     * {% codeBlock src='inplace-editor/value/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     * @isGenericType true
+     */
+    value?: string | number | Date | string[] | Date[] | number[];
+
+    /**
+     * Specifies the HTML element ID as a string that can be added as a editable field.
+     *
+     * {% codeBlock src='inplace-editor/template/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     * @blazorType string
+     * @aspType string
+     */
+    template?: string | HTMLElement | Function;
+
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
+     * It enables or disables the parsing of HTML string content into HTML DOM elements for In-place Editor.
+     * If the value of the property is set to false, the In-place Editor value will be displayed as HTML string instead of HTML DOM elements.
+     *
+     * @default true
+     */
+    enableHtmlParse?: boolean;
+
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of In-place editor.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the unique primary key of editable field which can be used for saving data in data-base.
+     *
+     * {% codeBlock src='inplace-editor/primary-key/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    primaryKey?: string | number;
+
+    /**
+     * Sets the text to be shown when an element has 'Empty' value.
+     *
+     * {% codeBlock src='inplace-editor/empty-text/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Empty'
+     */
+    emptyText?: string;
+
+    /**
+     * Gets the url for server submit action.
+     *
+     * {% codeBlock src='inplace-editor/url/index.md' %}{% endcodeBlock %}
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Specifies the mode to be render while editing. The possible modes are :
+     *
+     * - `Inline`: Editable content is displayed as inline text and ok/cancel buttons are displayed at right bottom corner of input.
+     * - `Popup`: Editable content and ok/cancel buttons are displayed inside popup while editing.
+     *
+     * {% codeBlock src='inplace-editor/mode/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Popup'
+     */
+    mode?: RenderMode;
+
+    /**
+     * Specifies the adaptor type that are used DataManager to communicate with DataSource. The possible values are,
+     *
+     * - `UrlAdaptor`: Base adaptor for interacting with remote data services.
+     * - `ODataV4Adaptor`: Used to interact with ODataV4 service.
+     * - `WebApiAdaptor`: Used to interact with Web api created with OData endpoint.
+     *
+     * {% codeBlock src='inplace-editor/adaptor/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'UrlAdaptor'
+     */
+    adaptor?: AdaptorType;
+
+    /**
+     * Specifies the type of components that integrated with In-place editor to make it as editable.
+     *
+     * {% codeBlock src='inplace-editor/type/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Text'
+     */
+    type?: InputType;
+
+    /**
+     * Specifies the event action of input to enter edit mode instead of using edit icon. The possible values are:
+     *
+     * - `Click`: Do the single click action on input to enter into the edit mode.
+     * - `DblClick`: Do the single double click action on input to enter into the edit mode.
+     * - `EditIconClick`: Disables the editing of event action of input and allows user to edit only through edit icon.
+     *
+     * {% codeBlock src='inplace-editor/editable-on/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Click'
+     */
+    editableOn?: EditableType;
+
+    /**
+     * Specifies the option to be set on initial rendering. It is applicable for DropDownList,
+     * AutoComplete, ComboBox, and MultiSelect component types.
+     * The possible options are:
+     *
+     * - `Never`: The corresponding field value will never be set initially in the component.
+     * - `Always`: The corresponding field value will be set initially in the component.
+     *
+     * @default 'Never'
+     */
+    textOption?: textOptionType;
+
+    /**
+     * Specifies the action to be perform when user clicks outside the container, that is focus out of editable content.
+     * The possible options are,
+     *
+     * - `Cancel`: Cancel's the editing and resets the old content.
+     * - `Submit`: Submit the edited content to the server.
+     * - `Ignore`: No action is perform with this type and allows to have many containers open.
+     *
+     * @default 'Submit'
+     */
+    actionOnBlur?: ActionBlur;
+
+    /**
+     * Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * {% codeBlock src='inplace-editor/enable-persistence/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    enablePersistence?: boolean;
+
+    /**
+     * Specifies whether to enable editing mode or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Used to show/hide the ok/cancel buttons of In-place editor.
+     *
+     * {% codeBlock src='inplace-editor/show-buttons/index.md' %}{% endcodeBlock %}
+     *
+     * @default true
+     */
+    showButtons?: boolean;
+
+    /**
+     * Specifies to show/hide the editing mode.
+     *
+     * {% codeBlock src='inplace-editor/enable-edit-mode/index.md' %}{% endcodeBlock %}
+     *
+     * @default false
+     */
+    enableEditMode?: boolean;
+
+    /**
+     * Sets to trigger the submit action with enter key pressing of input.
+     *
+     * {% codeBlock src='inplace-editor/submit-on-enter/index.md' %}{% endcodeBlock %}
+     *
+     * @default true
+     */
+    submitOnEnter?: boolean;
+
+    /**
+     * Specifies the object to customize popup display settings like positions, animation etc.
+     *
+     * {% codeBlock src='inplace-editor/popup-settings/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    popupSettings?: PopupSettingsModel;
+
+    /**
+     * Specifies the model object configuration for the integrated components like AutoComplete, DatePicker,NumericTextBox, etc.
+     *
+     * {% codeBlock src='inplace-editor/model/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    model?: AutoCompleteModel | ColorPickerModel | ComboBoxModel | DatePickerModel | DateRangePickerModel | DateTimePickerModel | DropDownListModel | MaskedTextBoxModel | MultiSelectModel | NumericTextBoxModel | RichTextEditorModel | SliderModel | TextBoxModel | TimePickerModel;
+
+    /**
+     * Used to customize the "Save" button UI appearance by defining Button model configuration.
+     *
+     * {% codeBlock src='inplace-editor/save-button/index.md' %}{% endcodeBlock %}
+     *
+     * @default { iconCss: 'e-icons e-save-icon' }
+     */
+    saveButton?: ButtonModel;
+
+    /**
+     * Used to customize the "Cancel" button UI appearance by defining Button model configuration.
+     *
+     * {% codeBlock src='inplace-editor/cancel-button/index.md' %}{% endcodeBlock %}
+     *
+     * @default { iconCss: 'e-icons e-cancel-icon' }
+     */
+    cancelButton?: ButtonModel;
+
+    /**
+     * Maps the validation rules for the input.
+     *
+     * {% codeBlock src='inplace-editor/validation-rules/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    validationRules?: { [name: string]: { [rule: string]: Object } };
+
+    /**
+     * The event will be fired once the component rendering is completed.
+     *
+     * @event 'event'
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers before sanitize the value.
+     * @event 
+     * @blazorProperty 'OnSanitizeHtml'
+     */
+    beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
+
+    /**
+     * The event will be fired before the data submitted to the server.
+     *
+     * @event 'event'
+     * @blazorProperty 'OnActionBegin'
+     */
+    actionBegin?: EmitType<ActionBeginEventArgs>;
+
+    /**
+     * The event will be fired when data submitted successfully to the server.
+     *
+     * @event 'event'
+     * @blazorProperty 'OnActionSuccess'
+     */
+    actionSuccess?: EmitType<ActionEventArgs>;
+
+    /**
+     * The event will be fired when data submission failed.
+     *
+     * @event 'event'
+     * @blazorProperty 'OnActionFailure'
+     */
+    actionFailure?: EmitType<ActionEventArgs>;
+
+    /**
+     * The event will be fired while validating current value.
+     *
+     * @event 'event'
+     * @blazorProperty 'Validating'
+     */
+    validating?: EmitType<ValidateEventArgs>;
+
+    /**
+     * The event will be fired before changing the mode from default to edit mode.
+     *
+     * @event 'event'
+     */
+    beginEdit?: EmitType<BeginEditEventArgs>;
+
+    /**
+     * The event will be fired when the edit action is finished and begin to submit/cancel the current value.
+     *
+     * @event 'event'
+     */
+    endEdit?: EmitType<EndEditEventArgs>;
+
+    /**
+     * The event will be fired when the integrated component value has changed that render based on the `type` property
+     * in the In-place editor.
+     *
+     * @event 'event'
+     * @blazorProperty 'ValueChange'
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Event triggers when click the submit button.
+     *
+     * @event 'event'
+     * @blazorProperty 'SubmitClick'
+     */
+    submitClick?: EmitType<MouseEvent>;
+
+    /**
+     * Event triggers when click the cancel button.
+     *
+     * @event 'event'
+     * @blazorProperty 'CancelClick'
+     */
+    cancelClick?: EmitType<MouseEvent>;
+
+    /**
+     * The event will be fired when the component gets destroyed.
+     *
+     * @event 'event'
+     * @blazorProperty 'Destroyed'
+     */
+    destroyed?: EmitType<Event>;
+
+}