diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1533b23
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "natural_js_boot",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.html",
+ "scripts": {
+ "build": "tsc",
+ "build:watch": "tsc -w",
+ "dev": "NODE_ENV=dev nodemon --watch src/ --delay 500ms --exec ts-node src/start.ts",
+ "start:dev": "NODE_ENV=dev ts-node-dev --respawn --transpile-only src/start.ts",
+ "start": "NODE_ENV=production node build/start.js"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/bbalganjjm/natural_js.git"
+ },
+ "private": true,
+ "dependencies": {
+ "@types/jquery": "^3.5.32"
+ }
+}
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index fb62907..090123e 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -12,19 +12,17 @@
+
-
-
-
-
-
+
+
-
-
-
+
+
+
+ * ```
+ *
+ * If you load a page with the above structure using the N.popup, N.tab component or N.comm library, the init function of the Controller object is called when page loading is complete.
+ *
+ * > For Natural-ARCHITECTURE-based pages to function properly, they must be loaded with the N.comm library, N.popup, or N.tab components.
+ *
+ * > When selecting an element on a page, you must `find` on a view or specify view as the `context` argument (second argument) to a jQuery function.
+ * Otherwise, unintended elements from other block pages may be selected, resulting in unpredictable errors.
+ * For more information, please refer to the [Restrictions and Tips](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0601.html) menu.
+ *
+ * > When `N(".view").cont()` is executed, a `pageid data attribute value` such as `data-pageid="view"` is created in the `.view` element specified by the selector.
+ * The `pageid` is `.(dot), #(sharp), [(left bracket), ](right bracket), '(single quote), :(colon), ((left bracket), ), )(right bracket), >(right arrow bracket), " "(space), -(hyphen)` characters are removed to create pageid, so the page identification value is defined not to include the special characters.
+ * For example, `N("page.view-01").cont()` creates a pageid of `pageview01` with the dot and hyphen removed.
+ *
+ * To control a specific page, such as a block page or tab content, you can get a Controller object as follows.
+ * ```
+ * var page01Cont = N("#page01").instance("cont");
+ * page01Cont.gridInst.bind([]);
+ * ```
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0201.html
+ */
+ cont(contObj: NA.Objects.Controller.Object): NA.Objects.Controller.Object;
+}
+
+declare namespace NA {
+ class Communicator {
+ constructor(obj: NJS | string, url?: string | NA.Options.Request);
+ xhr: JQuery.jqXHR;
+ initFilterConfig(): NA.Objects.Config.FilterConfig;
+ resetFilterConfig(): NA.Communicator;
+ /**
+ * Registers a callback function to be executed when a successful response is received from the server.
+ *
+ * If the `callback` argument is not provided to the `submit` function, a Promise-compatible `xhr` object is returned, allowing the use of async/await syntax.
+ *
+ * ```
+ * // JSON Data
+ * const fn1 = async () => {
+ * const data = await N.comm("data.json").submit();
+ * };
+ *
+ * // Catch exception
+ * const fn2 = async () => {
+ * const data = await N.comm("data.json").submit().then((data) => {
+ * console.log(data);
+ * }).catch((e) => {
+ * console.error(e);
+ * });
+ * };
+ *
+ * // HTML page
+ * const fn3 = async () => {
+ * const data = await N("#page-container").comm("page.html").submit();
+ * console.log(data); // HTML Text
+ * };
+ * ```
+ *
+ * @param {NA.Callbacks.Communicator.Submit} callback - Define a callback function that handles the server's response when the request is successful.
+ *
+ * When requesting an HTML page, a Controller object of the loaded page is returned as the argument to the callback function. For other requests, a data object and the Communicator.request object are returned.
+ * ```
+ * // JSON Data
+ * N.comm("data.json").submit(function(data, request) {
+ * N.log(data, request);
+ * });
+ *
+ * // HTML page
+ * N("#page-container").comm("page.html").submit(function(cont) {
+ * N.log(cont); // cont: Controller object
+ * });
+ * ```
+ * @return {NA.Communicator} The jqXHR object or the Communicator instance depending on the submission context.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0203.html&tab=html/naturaljs/refr/refr020305.html
+ */
+ submit(callback: NA.Callbacks.Communicator.Submit): NA.Communicator;
+ /**
+ * Registers a callback function to be executed when a successful response is received from the server.
+ *
+ * If the `callback` argument is not provided to the `submit` function, a Promise-compatible `xhr` object is returned, allowing the use of async/await syntax.
+ *
+ * ```
+ * // JSON Data
+ * const fn1 = async () => {
+ * const data = await N.comm("data.json").submit();
+ * };
+ *
+ * // Catch exception
+ * const fn2 = async () => {
+ * const data = await N.comm("data.json").submit().then((data) => {
+ * console.log(data);
+ * }).catch((e) => {
+ * console.error(e);
+ * });
+ * };
+ *
+ * // HTML page
+ * const fn3 = async () => {
+ * const data = await N("#page-container").comm("page.html").submit();
+ * console.log(data); // HTML Text
+ * };
+ * ```
+ *
+ * @return {JQuery.jqXHR} The jqXHR object or the Communicator instance depending on the submission context.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0203.html&tab=html/naturaljs/refr/refr020305.html
+ */
+ submit(): JQuery.jqXHR;
+ /**
+ * Registers a callback function that will be executed when an error response is received from the server after calling the submit function or when an error occurs in the callback function of the submit method.
+ * > You can call the error method multiple times to register multiple callback functions.
+ *
+ * @param {NA.Callbacks.Communicator.Error} callback - Defines the callback function that handles errors when they occur.
+ *
+ * The `this` context of the callback function is the instance of the created N.comm, and it receives the following arguments:
+ * - xhr(arguments[2]): jQuery XMLHTTPRequest
+ * - textStatus(arguments[3]): "success" (when an error occurs in the submit callback) or "error" (when an error occurs from the server)
+ * - e(arguments[0]): ErrorThrown
+ * - request(arguments[1]): Communicator.request
+ * - callback(arguments[4]): The callback function specified as an argument in the submit method when textStatus is "success".
+ *
+ * ```
+ * N.comm("data.json").error(function(xhr, textStatus, e, request, callback) {
+ * // 2. First error handler for col01.length error
+ * }).error(function(xhr, textStatus, e, request, callback) {
+ * // 3. Second error handler for col01.length error
+ * }).submit(function(data, request) {
+ * var col01;
+ * col01.length; // 1. Generates an undefined related error
+ * });
+ * ```
+ *
+ * @return {NA.Communicator} Returns the `Communicator` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0203.html&tab=html/naturaljs/refr/refr020305.html
+ */
+ error(callback: NA.Callbacks.Communicator.Error): NA.Communicator;
+ /**
+ * The `Communicator.request` object is a request information object created each time `N.comm` is executed.
+ *
+ * The options of the `N.comm()` function are stored in the `Communicator.request.options` object and are delivered as headers or parameters of the server request.
+ *
+ * When requesting an HTML page, the request object is passed as the second argument of the `init` function of the Controller object or as a member variable (`this.request`) of the Controller object. You can check the request information or retrieve the request parameter object using the provided request object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html
+ */
+ request: NA.Request;
+ }
+
+ class Request {
+ constructor(obj: NJS, opts: NA.Options.Request);
+ options: NA.Options.Request;
+ attrObj: object;
+ obj: NA.Communicator;
+ /**
+ * Get the parameters passed while calling this page.
+ *
+ * Retrieving data from the loaded page:
+ * ```
+ * N(".view").cont({
+ * init: function(view, request) {
+ * var data1 = request.attr("data1"); // { data: ["1", "2"] }
+ * var data2 = request.attr("data2"); // ["3", "4"]
+ * }
+ * });
+ * ```
+ *
+ * @param {String} name - Parameter name
+ *
+ * @return {NA.Communicator} Returns the passed parameter value.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ attr(name: string): any;
+ /**
+ * Set the parameters to be passed to the page to be loaded.
+ *
+ * Sending data:
+ * ```
+ * N(".view").cont({
+ * init: function(view, request) {
+ * N("#section").comm("page.html")
+ * .request.attr("data1", { data: ["1", "2"] })
+ * .request.attr("data2", ["3", "4"])
+ * .submit();
+ * }
+ * });
+ * ```
+ *
+ * @param {String} name - Parameter name
+ * @param {any} obj - Parameter data
+ *
+ * @return {NA.Communicator} Returns the Communicator object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ attr(name: string, obj: any): NA.Communicator;
+ removeAttr(name: string): NA.Communicator;
+ /**
+ * Extracts the GET parameter values from the browser's URL.
+ *
+ * @return {object} Returns all GET parameters as an object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ param(): object;
+ /**
+ * Extracts the value of a GET parameter from the URL in the browser.
+ *
+ * @param {string} name - The key of the parameter to be retrieved.
+ * @return {string} The value of the parameter
+ */
+ param(name: string): string;
+ /**
+ * Retrieves the current request options.
+ *
+ * @return {NA.Options.Request} The options used for the request.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ get(): NA.Options.Request;
+ /**
+ * Retrieves for the value specified as a key in request options.
+ *
+ * @param {string} key - Property name of request options
+ * @return {any} Value corresponding to the key value specified in request options
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ get(key: string): any;
+ /**
+ * Reloads the block page loaded by the Communicator.
+ * > If the attr method has not been called to set values before calling reload, the values in the request object before the reload are maintained even after reloading.
+ *
+ * > You can specify the Communicator.request data for the page being reloaded using the attr method.
+ *
+ * ```
+ * request.attr("param", { param: 1 });
+ * request.reload();
+ * ```
+ *
+ * > The reload function does not support method chaining.
+ * ```
+ * request.attr("param", { param: 1 }).reload(); // This usage is invalid.
+ * ```
+ *
+ * @param {NA.Callbacks.Request.Reload} [callback] - An optional callback function that will be called upon the completion of the reload process.
+ * ```
+ * request.reload(function(html, request) {
+ * N.log(html, request);
+ * });
+ * ```
+ * @return {NA.Communicator} Returns the Communicator instance to allow for method chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0204.html&tab=html/naturaljs/refr/refr020403.html
+ */
+ reload(callback?: NA.Callbacks.Request.Reload): NA.Communicator;
+ }
+
+ interface Controller {
+ new(obj: NJS, contObj: NA.Objects.Controller.Object): NA.Objects.Controller.Object;
+ trInit(cont: NA.Objects.Controller.Object, request: NA.Request): void;
+ /**
+ * Aspect-oriented programming(AOP) processing class.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0202.html
+ */
+ aop: {
+ pointcuts: {
+ regexp: {
+ fn(param: RegExp | string, contFrag: NA.Objects.Controller.Object, fnChain: string): boolean;
+ };
+ };
+ wrap(cont: NA.Objects.Controller.Object): void;
+ };
+ }
+
+ interface Context {
+ attrObj: object;
+ /**
+ * Get data stored in N.context.
+ *
+ * @param {string} name - data name.
+ * @return {any} Stored data.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0206.html&tab=html/naturaljs/refr/refr020602.html
+ */
+ attr(name: string): any;
+ /**
+ * Set the data to be stored in N.context.
+ *
+ * @param {string} name - data name.
+ * @param {any} obj - Data to store.
+ * @return {this} The current object, for chainability.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0206.html&tab=html/naturaljs/refr/refr020602.html
+ */
+ attr(name: string, obj: any): NA.Context;
+ }
+
+ interface Config {
+ filterConfig: NA.Objects.Config.FilterConfig;
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.architecture.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.architecture.misc.d.ts
new file mode 100644
index 0000000..a4966b6
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.architecture.misc.d.ts
@@ -0,0 +1,258 @@
+declare namespace NA {
+ namespace Options {
+ /**
+ * Options interface extending the JQuery.Ajax.AjaxSettingsBase interface for making `N.comm.request` with additional settings.
+ */
+ interface Request extends Omit, "success" | "error" | "complete"> {
+ /**
+ * A string containing the URL to which the request is sent.
+ */
+ url: string;
+ /**
+ * When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.
+ */
+ contentType?: string;
+ /**
+ * The MIME type of content that is used to submit the form to the server. Possible values are:
+ *
+ * "application/x-www-form-urlencoded": The initial default type.
+ *
+ * "multipart/form-data": The type that allows file `` element(s) to upload file data.
+ *
+ * "text/plain": A type introduced in HTML5.
+ */
+ enctype?: Objects.Request.Enctype;
+ /**
+ * If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
+ */
+ cache?: boolean;
+ /**
+ * By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().
+ *
+ * @deprecated
+ */
+ async?: boolean;
+ /**
+ * An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0.
+ */
+ type?: Objects.Request.HttpMethod;
+ /**
+ * Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
+ */
+ data?: JQuery.PlainObject | string;
+ /**
+ * The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are:
+ *
+ * "xml": Returns an XML document that can be processed via jQuery.
+ *
+ * "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
+ *
+ * "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, _=[TIMESTAMP], to the URL unless the cache option is set to true. Note: This will turn POSTs into GETs for remote-domain requests.
+ *
+ * "json": Evaluates the response as JSON and returns a JavaScript object. Cross-domain "json" requests are converted to "jsonp" unless the request includes jsonp: false in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)
+ *
+ * "jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.
+ *
+ * "text": A plain text string.
+ *
+ * multiple, space-separated values: As of jQuery 1.5, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use "text xml" for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: "jsonp text xml". Similarly, a shorthand string such as "jsonp xml" will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.
+ */
+ dataType?: Objects.Request.DataType;
+ /**
+ * If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain.
+ */
+ crossDomain?: boolean;
+ /**
+ * The browser's `location.href` value when requested.
+ */
+ referrer?: string;
+ /**
+ * If set to `true`, the parameter object specified as an argument of the N function in `N().comm` can be specified as an array type.
+ *
+ * > When using Communicator with `N(params).comm(url).submit()`, if the object type of params is array and the dataIsArray option is set to false, only the first object of array is transmitted.
+ * The cause of this problem is that if you call the get function after setting the argument of the jQuery function to `array(jQuery([{}]))` or `object($({}))`, both return `array([{}])`.
+ * Even if it is inconvenient, when transmitting an array to the server, set dataIsArray to true or use an array in an object.
+ *
+ * > When `Communicator` is used with `N.comm(params, url).submit()`, even if the dataIsArray option is not set to true, params is not created as a jQuery object, so it is sent as an array type.
+ *
+ * > Applied after `Natural-ARCHITECTURE v0.8.1.4` version.
+ */
+ dataIsArray?: boolean;
+ /**
+ * If set to `false`, the response will not be blocked even if the location.href when making a request to the server and the location.href when receiving a response from the server are different.
+ *
+ * > If the server response is blocked for unknown reasons, test this option by setting it to false.
+ */
+ urlSync?: boolean;
+ /**
+ * If set to `true`, the loaded page will be appended to the element specified by the `target` option rather than overwritten.
+ */
+ append?: boolean;
+ /**
+ * Specifies the element into which to insert HTML content.
+ *
+ * > When Communicator is used with `N(".block").comm("page.html").submit()`, the `N("#block")` element object is specified as the target property value.
+ */
+ target?: NJS;
+ }
+ }
+
+ namespace Callbacks {
+ namespace Communicator {
+ interface Submit {
+ (
+ this: NA.Communicator,
+ data?: NC.JSONObject | NC.JSONObject[] | NC.Primitive | object | object[] | NA.Controller,
+ request?: NA.Request,
+ ): void;
+ }
+ interface Error {
+ (
+ this: NA.Communicator,
+ xhr: JQuery.jqXHR,
+ textStatus: JQuery.Ajax.TextStatus,
+ e: Error,
+ request: NA.Request,
+ submitCallback: Submit,
+ ): void;
+ }
+ }
+
+ namespace Controller {
+ interface OnOpen {
+ (this: NA.Objects.Controller.Object, onOpenData?: any): void;
+ }
+ }
+
+ namespace Request {
+ interface Reload {
+ (this: NA.Communicator, html?: string | NA.Controller, request?: NA.Request): void;
+ }
+ }
+ }
+
+ namespace Objects {
+ namespace Request {
+ /**
+ * Enum representing different encoding types for form submissions.
+ *
+ * The `Enctype` enum provides a set of constants that define the encoding type
+ * used when submitting form data. This is used in the `enctype` attribute of HTML forms.
+ *
+ * Enctype.URLENCODED - Represents the MIME type `application/x-www-form-urlencoded`.
+ * This is the default encoding type that is used by forms.
+ *
+ * Enctype.MULTIPART - Represents the MIME type `multipart/form-data`.
+ * This encoding type is used when the form includes file uploads.
+ *
+ * Enctype.PLAIN - Represents the MIME type `text/plain`.
+ * This encoding type sends data without any encoding for the key-value pairs.
+ */
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum Enctype {
+ URLENCODED = "application/x-www-form-urlencoded",
+ MULTIPART = "multipart/form-data",
+ PLAIN = "text/plain",
+ }
+
+ /**
+ * An enumeration for different types of data formats that can be used.
+ */
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum DataType {
+ JSON = "json",
+ XML = "xml",
+ SCRIPT = "script",
+ HTML = "html",
+ TEXT = "text",
+ JSONP = "jsonp",
+ }
+
+ /**
+ * Enum for HTTP methods.
+ *
+ * This enum provides a collection of standard HTTP methods used in network communication.
+ * Each key in the enum represents a type of request that can be made to a web server.
+ *
+ * - POST: Used to submit data to be processed to a specified resource.
+ * - GET: Requests a representation of the specified resource.
+ * - PUT: Replaces all current representations of the target resource with the request payload.
+ * - DELETE: Deletes the specified resource.
+ * - HEAD: Asks for a response identical to a GET request, but without the response body.
+ * - OPTIONS: Used to describe the communication options for the target resource.
+ * - TRACE: Performs a message loop-back test along the path to the target resource.
+ * - CONNECT: Establishes a tunnel to the server identified by the target resource.
+ * - PATCH: Used to apply partial modifications to a resource.
+ */
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum HttpMethod {
+ POST = "POST",
+ GET = "GET",
+ PUT = "PUT",
+ DELETE = "DELETE",
+ HEAD = "HEAD",
+ OPTIONS = "OPTIONS",
+ TRACE = "TRACE",
+ CONNECT = "CONNECT",
+ PATCH = "PATCH",
+ }
+ }
+
+ namespace Controller {
+ interface InitFunction {
+ (this: Object, view: NJS, request: NA.Request): void;
+ }
+
+ interface BaseObject {
+ [key: string]: any;
+ /**
+ * The initializer function that is called to set up the initial state or configuration.
+ * This function is optional, and if provided, it should follow the signature defined by `InitFunction`.
+ */
+ init?: InitFunction;
+ /**
+ * View element.
+ *
+ * > Same as the first argument of the init function.
+ */
+ view?: NJS;
+ /**
+ * Instance of the Communicator.request object.
+ *
+ * > Same as the second argument of the init function.
+ */
+ request?: NA.Request;
+ /**
+ * If the popup page is called by N.popup or N.tab components, this is the instance of the calling component.
+ * With this instance, you can control the parent page.
+ */
+ caller?: NU.Popup & NU.Tab; // FIXME
+ /**
+ * If the popup page is called by N.popup or N.tab components, this is the controller object instance of the parent page.
+ *
+ * With this instance, you can control the parent page.
+ *
+ * > The opener attribute should be specified with the Controller object of the parent page when creating an instance of N.popup or N.tab components.
+ */
+ opener?: BaseObject & NT.Objects.Controller.Object;
+ /**
+ * This is a function implementation of the onOpen option specified as a string in pop-ups and tabs.
+ */
+ onOpen?: Callbacks.Controller.OnOpen;
+ }
+
+ type Object = BaseObject & (NT.Objects.Controller.InitialObject | {});
+ }
+
+ namespace Config {
+ interface FilterConfig {
+ beforeInitFilters: object[];
+ afterInitFilters: object[];
+ beforeSendFilters: object[];
+ successFilters: object[];
+ errorFilters: object[];
+ completeFilters: object[];
+ }
+ }
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.code.d.ts b/src/main/resources/static/js/natural_js/@types/natural.code.d.ts
new file mode 100644
index 0000000..669bb3e
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.code.d.ts
@@ -0,0 +1,14 @@
+declare class NCD {
+ static inspection: {
+ test(codes: string, rules?: string[]): boolean | NCD.CodeInspectionResult[];
+ rules: {
+ NoContextSpecifiedInSelector(codes: string, excludes: string[], report: NCD.CodeInspectionResult[]): void;
+ UseTheComponentsValMethod(codes: string, excludes: string[], report: NCD.CodeInspectionResult[]): void;
+ };
+ report: {
+ console(data: NCD.CodeInspectionResult[], url: string): false | undefined;
+ };
+ };
+
+ static addSourceURL(codes: string, sourceURL: string): string;
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.code.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.code.misc.d.ts
new file mode 100644
index 0000000..6e47dd6
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.code.misc.d.ts
@@ -0,0 +1,16 @@
+declare namespace NCD {
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum SeverityLevels {
+ BLOCKER = "Blocker",
+ CRITICAL = "Critical",
+ MAJOR = "Major",
+ MINOR = "Minor",
+ }
+
+ interface CodeInspectionResult {
+ level: SeverityLevels.BLOCKER | SeverityLevels.CRITICAL | SeverityLevels.MAJOR | SeverityLevels.MINOR;
+ message: string;
+ line: number;
+ code: string;
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.core.d.ts b/src/main/resources/static/js/natural_js/@types/natural.core.d.ts
new file mode 100644
index 0000000..c3cf498
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.core.d.ts
@@ -0,0 +1,926 @@
+/**
+ * The NC class is a CORE package of Natural-JS that provides various utilities and methods for collection manipulation, event binding, instance handling, value management, event retrieval, locale setting, etc.
+ */
+declare class NC {
+ /**
+ * Removes an element from the collection based on the provided index or identifier.
+ *
+ * @param {any} idx - The index or identifier of the element to be removed.
+ * @param {number} length - The length of the collection from which the element is to be removed.
+ * @return {this} The instance of the collection after the element has been removed.
+ */
+ remove_(idx: any, length: number): NC;
+ /**
+ * Binds an event handler that is executed with top priority to the specified event type of the selected element.
+ *
+ * @param {string} eventName - The name of the event to bind to.
+ * @param {JQuery.EventHandler} eventHandler - The event handler function to execute when the event is triggered.
+ * @return {this} The current object, for chainability.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010103.html
+ */
+ tpBind(eventName: string, eventHandler: JQuery.EventHandler): NC;
+ /**
+ * Returns or stores an instance of the component object or Controller object in the context element or View element of the UI component.
+ * > Natural-JS stores the created object instances in the specified template (context or view) elements during the initialization of components or libraries to easily control block content such as tabs or popups.
+ *
+ * The method operates differently based on the number and type of arguments as follows:
+ * 1. Returns all instances stored in the selected elements.
+ *
+ * If only one instance is returned, the original instance object is returned. If there are two or more instances, they are stored and returned in an array. If no instances are found, `undefined` is returned.
+ * ```
+ * var all = N(".grid01", ".grid02").instance();
+ * ```
+ * 2. Specifies all instances stored in the selected elements as arguments of the callback function.
+ * > The callback function is executed as many times as there are instances.
+ * ```
+ * var all = N(".grid01", ".grid02").instance(function(instanceId, instance) {
+ * // this: instance
+ * // instanceId: identifier of the stored instance
+ * // instance: stored instance
+ * });
+ * ```
+ * 3. Returns all instances stored with the instanceId `name` in the selected elements.
+ *
+ * If only one instance is returned, the original instance object is returned. If there are two or more instances, they are stored and returned in an array. If no instances are found, `undefined` is returned.
+ * ```
+ * var all = N(".grid01", ".grid02").instance("name");
+ * ```
+ * 4. Returns all instances stored with the instanceId `name` in the selected elements as arguments of the callback function.
+ * > The callback function is executed as many times as there are instances.
+ * ```
+ * var all = N(".grid01", ".grid02").instance("name", function(instanceId, instance) {
+ * // this: instance
+ * // instanceId: identifier of the stored instance
+ * // instance: stored instance
+ * });
+ * ```
+ * 5. Stores the instance with instanceId `name` in the selected elements.
+ * ```
+ * N(".grid01").instance("name", instance);
+ * ```
+ * > If the `instance` argument is a function type, it might not work correctly. Use object or string types for the `instance` argument instead.
+ *
+ * @param {string | NC.InstanceCallback} name - The name of the instance.
+ *
+ * Predefined instance names are as follows:
+ *
+ * - Controller object of N.cont: cont
+ * - Instance of N.alert: alert
+ * > Stored in the .block_overlay_msg__ element.
+ * - Instance of N.button: button
+ * - Instance of N.datepicker: datepicker
+ * - Instance of N.popup: popup
+ * > The Controller object of the loaded popup content is stored in the .block_overlay_msg__ > .msg_box__ > .view_context__ element.
+ * - Instance of N.tab: tab
+ * > The Controller object of the loaded tab content is stored in the .tab__ > .{tab content element id} > .view_context__ element.
+ * - Instance of N.select: select
+ * - Instance of N.form: form
+ * - Instance of N.list: list
+ * - Instance of N.grid: grid
+ * - Instance of N.pagination: pagination
+ * - Instance of N.tree: tree
+ * - Instance of N.notify: notify
+ * - Instance of N.docs: docs
+ * > Components whose instance storage locations are not specifically mentioned are stored in the context elements specified by the context option.
+ * @param {NC.Instance} [instance] - The instance to store in the selected elements or a callback function to retrieve instances.
+ * > The callback function returns the index (arguments[0]) and each instance (arguments[1]). The `this` context of the callback function refers to each instance.
+ * @return {void | NJS | NC.Instance[] | NC.Instance | NC} Returns undefined, an array of instances, a single instance, or the context itself.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010103.html
+ */
+ instance(
+ name: string | NC.InstanceCallback,
+ instance?: NC.Instance,
+ ): undefined | NJS | NC.Instance[] | NC.Instance | NC;
+ /**
+ * Gets or selects the selected values of elements such as select, select[multiple=multiple], input[type=radio], and input[type=checkbox].
+ *
+ * > In the case of checkbox, if there is only one option, it operates in a mode that decides whether it is Y/N or 1/0.
+ *
+ * > You can set whether the default value for single selection is Y/N, 1/0, or on/off with the variables N.context.attr("core").sgChkdVal("Checked Value") and N.context.attr("core").sgUnChkdVal("Unchecked Value") in natural.config.js.
+ *
+ * @param {string|string[]|NC.ValsCallback} [vals] - Optional parameter that can be either a string, an array of strings, or a callback function.
+ *
+ * When specifying a single value, specify the value as a string, and when selecting two or more options, specify the value as an array of strings.
+ *
+ * If a function is specified, the callback function is executed for each selected option element. The arguments for the callback function are as follows:
+ * - this: The selected option element
+ * - args[0]: The index of the selected option element
+ * - args[1]: The selected option element
+ * @return {string|string[] | NJS | this} If the vals argument is not provided, the selected value is returned. If the vals argument is specified, the elements that match the specified value are selected.
+ * If only one is selected, a value of type string is returned, and if two or more are selected, the values are returned in an array.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010103.html
+ */
+ vals(vals?: string | string[] | NC.ValsCallback): string | string[] | NJS | NC;
+ /**
+ * Returns the events bound to the selected element.
+ *
+ * @param {string} eventName - The name of the event.
+ * @param {string} [namespace] - The optional namespace for the event.
+ * @return {NC.EventsObject | NC.EventObject} If neither the eventType argument nor the namespace argument is provided, all events are returned; if the namespace is not provided, only the events corresponding to the specified eventType are returned.
+ * If the namespace argument is provided, the events are returned as an array object, otherwise they are returned as a jQuery object. If no events are bound, undefined is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010103.html
+ */
+ events(eventName: string, namespace?: string): NC.EventsObject | NC.EventObject;
+ /**
+ * Gets the default locale value configured in the framework.
+ * > The default messages of the framework will be processed in multiple languages according to the configured locale value.
+ *
+ * > Pre-registered multilingual message sets include en_US, ko_KR, and can be modified in the `message` property of the [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html).
+ *
+ * > The default locale of the framework can be set to the value of the `N.context.attr("core").locale` property in [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html).
+ *
+ * @return {string} If the `str` argument is provided, it returns `undefined`. If not provided, it returns a locale string such as "en_US" or "ko_KR".
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static locale(): string;
+ /**
+ * Sets the default locale value to be configured in the framework.
+ * > The default messages of the framework will be processed in multiple languages according to the configured locale value.
+ *
+ * > Pre-registered multilingual message sets include en_US, ko_KR, and can be modified in the `message` property of the [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html).
+ *
+ * > The default locale of the framework can be set to the value of the `N.context.attr("core").locale` property in [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html).
+ *
+ * @param {string} str - Enter a valid locale string such as "en_US" or "ko_KR".
+ * @return {void} This method does not return any value.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static locale(str: string): void;
+ /**
+ * Logs the `debug` level messages to the console.
+ *
+ * @param {...any} obj - The items to log to the console. They can be of any type and multiple arguments can be passed.
+ * @return {Console} Displays the contents of the provided item in the browser console.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010103.html
+ */
+ static debug(...obj: any): Console;
+ /**
+ * Logs the messages to the console.
+ *
+ * @param {...any} obj - The items to log to the console. They can be of any type and multiple arguments can be passed.
+ * @return {Console} Displays the contents of the provided item in the browser console.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static log(...obj: any): Console;
+ /**
+ * Logs the `info` level messages to the console.
+ *
+ * @param {...any} obj - The items to log to the console. They can be of any type and multiple arguments can be passed.
+ * @return {Console} Displays the contents of the provided item in the browser console.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static info(...obj: any): Console;
+ /**
+ * Logs the `warning` level messages to the console.
+ *
+ * @param {...any} obj - The items to log to the console. They can be of any type and multiple arguments can be passed.
+ * @return {Console} Displays the contents of the provided item in the browser console.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static warn(...obj: any): Console;
+ /**
+ * Throws an error and logs the error message to the browser console.
+ *
+ * > The N.error function returns an ErrorThrown object, so to raise an error, you must declare the throw statement before the N.error function.
+ * ```
+ * throw N.error("An error has occurred.");
+ * ```
+ *
+ * @param {string} msg - The error message to be logged.
+ * @param {Error} [e] - If an Error object is specified, the error is raised using the specified object.
+ * @return {Error} Error object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static error(msg: string, e?: Error): Error;
+ /**
+ * Identifies the type of an object.
+ *
+ * @param {any} obj - The object to identify the type of.
+ * @return {NC.ObjectType | string} The identified type of the object, either as an NC.ObjectType or a string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static type(obj: any): NC.ObjectType | string;
+ /**
+ * Determines if the provided object is a string.
+ *
+ * @param {any} obj - The object to check.
+ * @return {boolean} true if the value is a string; otherwise, false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isString(obj: any): boolean;
+ /**
+ * Determines if the provided object is a numeric.
+ *
+ * @param {any} obj - The object to check.
+ * @return {boolean} true if the value is a numeric; otherwise, false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isNumeric(obj: any): boolean;
+ /**
+ * Determines if a given object is a plain object.
+ * A plain object is one that is created by the Object constructor or one with a prototype of null.
+ *
+ * @param {any} obj - The object to test.
+ * @return {boolean} true if the object is a plain object, false otherwise.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isPlainObject(obj: any): boolean;
+ /**
+ * Checks if the given object is empty (i.e., has no own enumerable properties).
+ *
+ * @param {object} obj - The object to check for emptiness.
+ * @return {boolean} Returns true if the object is empty, false otherwise.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isEmptyObject(obj: any): boolean;
+ /**
+ * Determines if the given object is an array.
+ *
+ * @param {any} obj - The object to be checked.
+ * @return {boolean} true if the object is an array, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isArray(obj: any): boolean;
+ /**
+ * Checks if the given object is array-like.
+ * An object is considered array-like if it is not a function and has a `length` property that is a number.
+ *
+ * @param {any} obj - The object to check.
+ * @return {boolean} - Returns `true` if the object is array-like, otherwise returns `false`.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isArraylike(obj: any): boolean;
+ /**
+ * Checks if the given object is of type jQuery object.
+ *
+ * @param {any} obj - The object to check.
+ * @return {boolean} true if the object is a jQuery object, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isWrappedSet(obj: any): boolean;
+ /**
+ * Determines if the provided object is a DOM element.
+ *
+ * @param {any} obj - The object to check.
+ * @return {boolean} true if the object is a DOM element, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static isElement(obj: any): boolean;
+ /**
+ * Converts a given element, array of elements, or any input to a CSS selector string.
+ *
+ * @param {NJS | HTMLElement | HTMLElement[] | any} el - The input element(s) or any value to convert.
+ * @returns {string} The CSS selector string derived from the input.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static toSelector(el: NC.Selector): string;
+ /**
+ * A function that takes a variable number of arguments and returns an array of
+ * JQuery.Deferred objects, ensuring that the deferred tasks are executed in serial order.
+ *
+ * @param {...Function} args - The arguments to be passed to each deferred task.
+ * @returns {JQuery.Deferred[]} An array of JQuery.Deferred objects representing the serialized execution of tasks.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010104.html
+ */
+ static serialExecute(...args: unknown[]): JQuery.Deferred[];
+ /**
+ * Provides methods to perform different levels of garbage collection.
+ */
+ static gc: {
+ /**
+ * Minimum garbage collection
+ *
+ * @returns {true} If the operation is successful, it unconditionally returns true.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010105.html
+ */
+ minimum(): true;
+ /**
+ * Full garbage collection
+ *
+ * @returns {true} If the operation is successful, it unconditionally returns true.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010105.html
+ */
+ full(): true;
+ /**
+ * Remove garbage instances from observables in ND.ds.
+ *
+ * @return {void} This method does not return any value.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010105.html
+ */
+ ds(): void;
+ };
+ /**
+ * Provides utility functions for processing and manipulating strings.
+ */
+ static string: {
+ /**
+ * Checks if the given context string contains the specified substring.
+ *
+ * @param {string} context - The string in which to search for the substring.
+ * @param {string} str - The substring to search for within the context string.
+ * @return {boolean} - Returns true if the context string contains the specified substring, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ contains(context: string, str: string): boolean;
+
+ /**
+ * Checks if the given string context ends with the specified substring str.
+ *
+ * @param {string} context - The string to be checked.
+ * @param {string} str - The substring to look for at the end of the context string.
+ * @return {boolean} Returns true if the context string ends with the specified substring, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ endsWith(context: string, str: string): boolean;
+ /**
+ * Checks if the provided string starts with the given substring.
+ *
+ * @param {string} context - The full string to be checked.
+ * @param {string} str - The substring to check for at the start of the full string.
+ * @return {boolean} true if the full string starts with the substring, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ startsWith(context: string, str: string): boolean;
+ /**
+ * Inserts a given substring into a context string at a specified index.
+ *
+ * @param {string} context - The original string where the substring will be inserted.
+ * @param {number} idx - The index at which to insert the substring.
+ * @param {string} str - The substring to be inserted.
+ * @return {string} - The resulting string after the insertion.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ insertAt(context: string, idx: number, str: string): string;
+ /**
+ * Removes all whitespace characters from the given string.
+ *
+ * @param {string} str - The string from which to remove whitespace.
+ * @return {string} The string without any whitespace characters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ removeWhitespace(str: string): string;
+ /**
+ * Pads the left side of a string with a specified character or string until the string reaches a given length.
+ *
+ * @param {string} str - The original string to be padded.
+ * @param {number} length - The desired total length of the string after padding.
+ * @param {string} padStr - The string to pad the original string with.
+ * @return {string} - The padded string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ lpad(str: string, length: number, padStr: string): string;
+ /**
+ * Right pads a given string with a specified string up to a certain length.
+ *
+ * @param {string} str - The original string to be padded.
+ * @param {number} length - The total length of the resulting string after padding.
+ * @param {string} padStr - The string to pad with.
+ * @return {string} The padded string of the specified length.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ rpad(str: string, length: number, padStr: string): string;
+ /**
+ * Checks if the provided string is empty.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} true if the string is empty, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ isEmpty(str: string): boolean;
+ /**
+ * Calculates the byte length of a string given a specific character byte length.
+ *
+ * @param {string} str - The input string for which to calculate the byte length.
+ * @param {number} charByteLength - The default byte length of each individual character in the string.
+ * @return {number} The total byte length of the string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ byteLength(str: string, charByteLength: number): number;
+ /**
+ * Trims the input string and returns an empty string if the input is null or undefined.
+ *
+ * @param str - The input string to be trimmed.
+ * @return The trimmed string, or an empty string if the input is null or undefined.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ trimToEmpty(str: string): string;
+ /**
+ * Converts a null or undefined string to an empty string.
+ * If the input string is neither null nor undefined, it will be returned as is.
+ *
+ * @param {string | null | undefined} str - The input string which can be null, undefined, or a string.
+ * @return {string} The original string if it is not null/undefined, otherwise an empty string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ nullToEmpty(str: string | null | undefined): string;
+ /**
+ * Trims the input string and returns `null` if the resulting string is empty.
+ *
+ * @param {string} str - The input string to be trimmed.
+ * @return {string | null} The trimmed string or null if the trimmed string is empty.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ trimToNull(str: string): string | null;
+ /**
+ * Trims the given string and returns `undefined` if the resulting string is empty.
+ *
+ * @param {string} str - The string to be trimmed.
+ * @return {string | undefined} - The trimmed string or undefined if the trimmed string is empty.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ trimToUndefined(str: string): string | undefined;
+ /**
+ * Trims leading and trailing whitespace from the given string. If the resulting string is empty,
+ * the method returns the string "0".
+ *
+ * @param {string} str - The string to be trimmed.
+ * @return {string} - The trimmed string, or "0" if the resulting string is empty.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ trimToZero(str: string): string;
+ /**
+ * Trims a given string and replaces it with a provided default value if it is empty.
+ *
+ * @param {string} str - The string to be trimmed.
+ * @param {string} val - The value to replace if the trimmed string is empty.
+ * @return {string} The trimmed string, or the replacement value if empty.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010106.html
+ */
+ trimToVal(str: string, val: string): string;
+ };
+ /**
+ * Provides various utilities for handling and manipulating dates.
+ */
+ static date: {
+ /**
+ * Calculates the difference in days between two dates given in string format.
+ *
+ * @param {string} refDateStr - The reference date as a string in the format YYYYMMDD.
+ * @param {string} targetDateStr - The target date as a string in the format YYYYMMDD.
+ * @return {number} The number of days between the reference date and the target date.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ diff(refDateStr: string, targetDateStr: string): number;
+ /**
+ * Converts a date string to an array of strings or numbers representing the date components.
+ *
+ * @param {string} str - The date string to be converted.
+ * @param {string} format - The format of the date string (e.g. "YYYYMMDD").
+ * @param {boolean} [isString] - Optional. If true, returns the components as strings; otherwise, returns them as numbers.
+ * @return {string[] | number[]} An array of strings or numbers representing the date components.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ strToDateStrArr(str: string, format: string, isString?: boolean): string[] | number[];
+ /**
+ * Converts a string to a NC.Date object based on the specified format.
+ *
+ * @param {string} str - The date and time string to be converted.
+ * - "19991231": "1999-12-31 00:00:00"
+ * - "1999123103": "1999-12-31 03:00:00"
+ * - "199912310348": "1999-12-31 03:48:00"
+ * - "19991231034856": "1999-12-31 03:48:56"
+ * @param {string} format - The expected format of the date and time string.
+ * - Y: Year
+ * - m: Month
+ * - d: Day
+ * - H: Hour
+ * - i: Minute
+ * - s: Second
+ * - e.g., "19991231": "Ymd"
+ * - e.g., "3112": "dm"
+ * - e.g., "12311999": "mdY"
+ * - e.g., "19991231120159": "YmdHis"
+ *
+ * > If the format argument is not provided, it is automatically set depending on the length of the input date string as follows:
+ * > - 4 digits: "Y"
+ * > - 6 digits: "Y-m"
+ * > - 8 digits: "Y-m-d"
+ * > - 10 digits: "Y-m-d H"
+ * > - 12 digits: "Y-m-d H:i"
+ * > - 14 digits: "Y-m-d H:i:s"
+ *
+ * > Date and time separator characters such as dash (-) and colon (:) are defined by the [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html) N.context.attr("data").formatter.date object functions. You can change these separator characters by modifying the return string of these functions.
+ *
+ * @return {NC.Date | null} A NC.Date object representing the date in the string, or null if the string does not match the format.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ strToDate(str: string, format: string): NC.Date | null;
+ /**
+ * Formats a given date string into the specified format.
+ *
+ * @param {string} str - The date string to be formatted.
+ * @param {string} [format] - An optional format string that determines the output format. If not provided, a default format will be used.
+ * - Y: Year
+ * - m: Month
+ * - d: Day
+ * - e.g., "19991231": "Ymd"
+ * - e.g., "3112": "dm"
+ * - e.g., "12311999": "mdY"
+ * @return {string} The formatted date string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ format(str: string, format?: string): string; // Format the date string
+ /**
+ * Converts a Date object to a timestamp.
+ *
+ * @param {Date} [dateObj] - The Date object to convert. If no Date object is provided, the current date and time are used.
+ * @return {number} The timestamp representation of the given date.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ dateToTs(dateObj?: Date): number;
+ /**
+ * Converts a Unix timestamp to a JavaScript Date object.
+ *
+ * @param {number} [tsNum] - The Unix timestamp to convert. If not provided, the current time will be used.
+ * @return {Date} The JavaScript Date object representing the given timestamp.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ tsToDate(tsNum?: number): Date;
+ /**
+ * Generates a list of date objects for a specified year and month.
+ *
+ * @param {number} year - The year for which the date list is to be generated.
+ * @param {number} month - The month for which the date list is to be generated.
+ * @return {[NC.JSONObject[]]} An array containing date objects for each day of the specified month in the specified year.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010108.html
+ */
+ dateList(year: number, month: number): [Date, Date, Date, Date, Date, Date, Date][];
+ };
+ /**
+ * Provides utility methods for working with HTML elements, including converting data attributes to options objects, creating JSON data objects, defining data change effects, and calculating maximum z-index.
+ */
+ static element: {
+ /**
+ * Converts an object string defined by the `data-opts` attribute value of an HTML element to an options object.
+ *
+ * @param {NJS} ele - HTML elements to be converted.
+ * @return {string} Options object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010107.html
+ */
+ toOpts(ele: NJS): string;
+ /**
+ * Converts an array object string defined by the `data-format` or `data-validate` attribute value of an HTML element to an rule array object.
+ *
+ * @param {NJS} ele - HTML elements to be converted.
+ * @param {"format" | "validate"} ruleset - The type of rules to be applied, either formatting or validation.
+ * @return {NC.RuleObj} - The resulting rule object containing the applied rules.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010107.html
+ */
+ toRules(ele: NJS, ruleset: "format" | "validate"): NC.RuleObj;
+ /**
+ * Creates a JSON Data object with the id and value attributes of the specified input elements.
+ *
+ * > Used in the N.form's add method to create initial data.
+ *
+ * e.g. Convert the values of the input elements inside the #box element to JSON data.
+ * ```
+ * var data = N.element.toData($("#box").find(":input"));
+ * ```
+ *
+ * @param {NJS} eles - N object containing only input select elements.
+ * @return {JSONObject} JSON data object with id and value pairs of the input elements.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010107.html
+ */
+ toData(eles: NJS): NC.JSONObject;
+
+ /**
+ * The effect of changes displayed on elements when data is synchronized by ND.ds is defined.
+ *
+ * @param {NJS} eles - HTML elements on which the change effect will be displayed.
+ * @return {void} This method does not return a value.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010107.html
+ */
+ dataChanged(eles: NJS): void;
+ /**
+ * Calculates the maximum z-index value among a collection of HTML elements.
+ *
+ * @param {NJS} ele - A collection of HTML elements to evaluate.
+ * @return {number} The highest z-index value found within the collection of elements.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010107.html
+ */
+ maxZindex(ele: NJS): number;
+ };
+ /**
+ * Provides various utility functions and properties related to browser operation.
+ */
+ static browser: {
+ /**
+ * Sets or gets a cookie based on the provided parameters. When only the name is provided, it retrieves the cookie value.
+ * When name and value are provided, it sets a cookie with the optional expiry days and domain.
+ *
+ * @param {string} name - The name of the cookie.
+ * @param {string} [value] - The value to be assigned to the cookie. If not provided, the function will return the current value of the cookie.
+ * @param {number} [expiredays] - The number of days until the cookie expires. Defaults to session cookie if not provided.
+ * @param {string} [domain] - The domain where the cookie is accessible. Defaults to current domain if not provided.
+ * @return {string | undefined} - The value of the cookie if only name is provided. Undefined if setting a cookie.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ cookie(name: string, value?: string, expiredays?: number, domain?: string): string | undefined;
+ /**
+ * Removes a cookie by its name and optional domain.
+ *
+ * @param {string} name - The name of the cookie to remove.
+ * @param {string} [domain] - The domain from which the cookie is to be removed. If omitted, the current domain is assumed.
+ * @return {void} This method does not return anything.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ removeCookie(name: string, domain?: string): void;
+ /**
+ * Function to retrieve the version of Microsoft Internet Explorer (IE).
+ *
+ * This function detects the version of IE being used by the client and returns
+ * it as a number. If the browser is not Internet Explorer, it returns 0.
+ *
+ * @return {number} The version of Internet Explorer as a number, or 0 if the browser is not IE.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ msieVersion(): number;
+ /**
+ * Checks if the given browser name matches the current browser type.
+ *
+ * @param {"opera" | "firefox" | "safari" | "chrome" | "ie" | "ios" | "android"} name - The name of the browser type to check against.
+ * @return {boolean} true if the given browser name matches the current browser type, otherwise false.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ is(name: NC.BrowserType): boolean;
+ /**
+ * Retrieves the context path of the application.
+ *
+ * This function returns a string representing the context path,
+ * which is typically the base path or root directory from which
+ * the application is served. It is commonly used for constructing
+ * URLs that are relative to the application's root.
+ * - "opera": Opera Browser.
+ * - "firefox": Mozilla Firefox Browser.
+ * - "safari": Apple Safari Browser.
+ * - "chrome": Google Chrome Browser.
+ * - "ie": Microsoft Internet Explorer Browser.
+ * - "android": Google Android OS
+ * - "ios": Apple iOS
+ *
+ * @returns {string} The application context path.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ contextPath(): string;
+ /**
+ * Calculates and returns the width of the browser's scrollbar.
+ *
+ * This function creates a temporary DOM element, measures the difference
+ * between its clientWidth and offsetWidth, and then removes the element.
+ *
+ * @returns {number} The width of the scrollbar in pixels.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010109.html
+ */
+ scrollbarWidth(): number;
+ };
+ /**
+ * Provides various utilities for handling messages.
+ */
+ static message: {
+ /**
+ * Replaces variables in the given message string with corresponding values from the vars array.
+ *
+ * @param msg - The message string containing variables to be replaced. Variables are denoted by placeholders such as {0}, {1}, etc.
+ * @param vars - An optional array of strings. Each entry in this array provides a replacement for the corresponding placeholder in the message string.
+ * @return The message string with all placeholders replaced by their corresponding values from the vars array.
+ */
+ replaceMsgVars(msg: string, vars?: string[]): string;
+ /**
+ * Returns a message that matches the currently set locale from the input message resource.
+ *
+ * The framework's default locale is `N.context.attr("core")` value in [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html) This can be set as the value of the `locale` property.
+ *
+ * @param {NC.MessageResourceObj} resource - The message resource object that needs to be fetched.
+ * Message resources must be created as object types and configure locale-specific message sets as follows.
+ * ```
+ * var message = {
+ * "ko_KR": {
+ * messageKey: "안녕 {0}."
+ * },
+ * "en_US": {
+ * messageKey: "Hello {0}."
+ * }
+ * }
+ *
+ * var msg = N.message.get(message, "key", ["Natural-JS"]);
+ *
+ * // msg: "Hello Natural-JS."
+ * ```
+ * @param {string} key - This is the key of the message to retrieve from the message resource object.
+ * The message string containing variables to be replaced. Variables are denoted by placeholders such as {0}, {1}, etc.
+ * @param {string[]} [vars] - An optional array of strings. Each entry in this array provides a replacement for the corresponding placeholder in the message string.
+ * @return {string} Message string, if there is no message string corresponding to key, the key value is returned as is.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010110.html
+ */
+ get(resource: NC.MessageResourceObj, key: string, vars?: string[]): string;
+ };
+ /**
+ * Array utilities for various array operations.
+ */
+ static array: {
+ /**
+ * Removes duplicate objects from an array based on a specified key.
+ * If no key is provided, it removes duplicate primitive values.
+ *
+ * @param {JSONObject[] | NJS} arr - The array from which duplicates are to be removed.
+ * @param {string} [key] - Optional. The property name on which duplication check is based.
+ * @return {JSONObject[]} A new array with duplicates removed.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010111.html
+ */
+ deduplicate(arr: NC.JSONObject[] | NJS, key?: string): NC.JSONObject[];
+ };
+ /**
+ * Provides utilities for processing JSON data.
+ */
+ static json: {
+ mapFromKeys(obj: NC.JSONObject | NC.JSONObject[]): NC.JSONObject | NC.JSONObject[];
+ /**
+ * Merges two JSON arrays based on a specified key.
+ *
+ * > - Merges the arr2 argument based on the arr1 argument and excludes duplicate elements.
+ * > - If you specify the object's property name as the third argument, duplicate elements are excluded based on that property.
+ * > - Even if the objects specified by the arr1 argument are merged, their memory references do not change.
+ *
+ * @param {JSONObject[] | NJS} arr1 - The first JSON array to merge.
+ * @param {JSONObject[] | NJS} arr2 - The second JSON array to merge.
+ * @param {string} key - The key used to identify and merge objects from the arrays.
+ * @return {JSONObject[]} The merged JSON array containing objects from both arrays.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010112.html
+ */
+ mergeJsonArray(
+ arr1: NC.JSONObject[] | NJS,
+ arr2: NC.JSONObject[] | NJS,
+ key: string,
+ ): NC.JSONObject[];
+ /**
+ * Formats the given data to a string representation with specified indentation.
+ *
+ * @param {object | object[] | string} oData - The data to be formatted. The data can be an object, array of objects, or json string.
+ * @param {number} sIndent - The number of spaces to use for indentation.
+ * @return {string | null} The formatted string or null if the data type is unsupported.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010112.html
+ */
+ format(oData: object | object[] | string, sIndent?: number): string | null;
+ };
+ /**
+ * Provides utilities for processing event.
+ */
+ static event: {
+ /**
+ * Checks if the provided keyboard event is related to number input keys.
+ * > This function was taken from "https://stackoverflow.com/a/13952775" and modified.
+ *
+ * @param e - The jQuery keyboard event to be checked.
+ * @return A boolean value indicating whether the event is related to number input keys.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010113.html
+ */
+ isNumberRelatedKeys(e: JQuery.Event): boolean; //
+ /**
+ * Disables the current event handling, effectively preventing the default action and stopping the propagation of the event.
+ *
+ * @param {JQuery.Event} e - The jQuery event object associated with the event being handled.
+ * @return {boolean} - Always returns false to indicate that the default action should not be executed.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0101.html&tab=html/naturaljs/refr/refr010113.html
+ */
+ disable(e: JQuery.Event): false;
+ /**
+ * Locks the window scrolling functionality to specific elements.
+ *
+ * @param {NJS} ele - HTML element that should lock window scrolling.
+ * @return {void} This method does not return a value.
+ */
+ windowScrollLock(ele: NJS): void;
+ /**
+ * Retrieves the maximum duration of CSS animations or transitions applied to any of the given HTMLElements.
+ *
+ * @param {NJS} ele - A wrapped or unwrapped array of HTMLElements to analyze for CSS durations.
+ * @param {string} css - The CSS property name (e.g., 'animation', 'transition') to inspect for durations.
+ * @return {number} The maximum duration in milliseconds among all specified CSS properties on the provided elements.
+ */
+ getMaxDuration(ele: NJS, css: string): number;
+ /**
+ * Detects the end event name of a CSS animation.
+ * > Referenced the code from [David Walsh](http://davidwalsh.name/css-animation-callback).
+ *
+ * @param {NJS} ele - The HTML elements to check for animation events.
+ * @return {string | "nothing"} The name of the animation event, or "nothing" if no event is found.
+ */
+ whichAnimationEvent(ele: NJS): string | "nothing"; // Detect the end event name of CSS animations,
+ /**
+ * Detects the end event name of a CSS transition.
+ * > Referenced the code from [David Walsh](http://davidwalsh.name/css-animation-callback).
+ *
+ * @param {NJS} ele - The HTML elements to check for transition events.
+ * @return {string | "nothing"} The name of the animation event, or "nothing" if no event is found.
+ */
+ whichTransitionEvent(ele: NJS): string | "nothing";
+ };
+ /**
+ * Used in N.formatter to process user formats.
+ *
+ * @see http://www.pengoworks.com/workshop/js/mask/ Mask JavaScript API(dswitzer@pengoworks.com)
+ */
+ static mask: {
+ new(m: any): {
+ /**
+ * Sets a generic value for masking operations.
+ */
+ setGeneric(_v: string, _d: boolean): string;
+ /**
+ * Sets a numeric value for masking based on the provided parameters.
+ */
+ setNumeric(_v: string, _p: string, _d: boolean): string;
+ };
+ };
+}
+
+/**
+ * Extends the JavaScript Date object to provide additional utility functions for date manipulation and formatting.
+ */
+interface Date {
+ /**
+ * Returns a string created with the date of the Date object in the specified format.
+ * > This is a function that extends to the Javascript Date object.
+ *
+ * > Referenced the library from [http://www.svendtofte.com/javascript/javascript-date-string-formatting/](http://www.svendtofte.com/javascript/javascript-date-string-formatting/) and [http://www.php.net/date](http://www.php.net/date).
+ *
+ * @param {string} input - Date format string.
+ * - Y: Year
+ * - m: Month
+ * - d: Day
+ * - H: Hour
+ * - i: Minute
+ * - s: Second
+ * - e.g., "1999-12-31": "Y-m-d"
+ * - e.g., "31/12": "d/m"
+ * - e.g., "12-31-1999": "m-d-Y"
+ * - e.g., "1999-12-31-12:01:59": "Y-m-d H:i:s"
+ * @param {number} [time] - A Timestamp value that sets the default date for the Date object.
+ * @return {string} The formatted date string.
+ */
+ formatDate(input: string, time?: number): string;
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.core.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.core.misc.d.ts
new file mode 100644
index 0000000..f7409aa
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.core.misc.d.ts
@@ -0,0 +1,107 @@
+declare namespace NC {
+ type Primitive = string | number | boolean | null;
+ type JSONValue = Primitive | JSONObject | JSONValue[];
+ interface JSONObject {
+ [key: string]: JSONValue;
+ }
+
+ interface Date {
+ obj: Date;
+ format: string;
+ }
+
+ type EventObject = object[];
+ interface EventsObject {
+ [key: string]: EventObject;
+ }
+
+ interface RuleObj {
+ id: {
+ [key: string]: [string, ...NC.Primitive[]][];
+ };
+ }
+
+ type Instance =
+ | NA.Controller
+ | NU.Alert
+ | NU.Button
+ | NU.Datepicker
+ | NU.Popup
+ | NU.Tab
+ | NU.Select
+ | NU.Form
+ | NU.List
+ | NU.Grid
+ | NU.Pagination
+ | NU.Tree
+ | NUS.Notify
+ | NUS.Documents;
+ interface InstanceCallback {
+ (this: NC.Instance, instanceName: string, instance: NC.Instance): void;
+ }
+
+ interface ValsCallback {
+ (this: NJS, index: number, selEle: NJS): void;
+ }
+
+ /**
+ * Enumeration representing types of web browsers.
+ */
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum BrowserType {
+ OPERA = "opera",
+ FIREFOX = "firefox",
+ SAFARI = "safari",
+ CHROME = "chrome",
+ IE = "ie",
+ IOS = "ios",
+ ANDROID = "android",
+ }
+
+ /**
+ * Represents a message resource object that stores localized strings organized
+ * by language and message keys. This type is typically used for managing
+ * translations or multilingual support in an application.
+ *
+ * The structure of the object is as follows:
+ * - The first level keys represent message identifiers.
+ * - The second level keys correspond to specific languages or locales.
+ * - The values are the translated strings in the defined language or locale.
+ *
+ * Example:
+ * ```
+ * {
+ * "greeting": {
+ * "en_US": "Hello",
+ * "ko_KR": "안녕하세요"
+ * }
+ * }
+ * ```
+ */
+ interface MessageResourceObj {
+ [key: string]: {
+ [key: string]: string;
+ };
+ }
+
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum ObjectType {
+ NUMBER = "number",
+ STRING = "string",
+ ARRAY = "array",
+ OBJECT = "object",
+ FUNCTION = "function",
+ DATE = "date",
+ }
+
+ type Selector =
+ | string
+ | Element
+ | Array
+ | JQuery
+ | JQuery.Node
+ | JQuery.PlainObject
+ | ((this: Document, readyCallback: (this: Document) => void) => void)
+ | NJS
+ | JQuery;
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.data.d.ts b/src/main/resources/static/js/natural_js/@types/natural.data.d.ts
new file mode 100644
index 0000000..2044886
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.data.d.ts
@@ -0,0 +1,1144 @@
+declare class ND {
+ /**
+ * Formatter(N.formatter) is a library that formats an input data set (array of JSON objects) and returns the formatted data set.
+ * - Instead of using a ruleset, you can pass an element as an argument, where the element wraps elements with formatting rules declared in the data-format attribute. This will display the formatted string in those elements. If the element is a text input element, it will display the original string of the data when the cursor focuses in (focusin event), and display the formatted string when the cursor focuses out (focusout event).
+ * - You can also format on a per-string basis rather than using a dataset.
+ *
+ * @param {NJS | HTMLElement | ND.FormatRuleObject | string} [rules] - Specifies formatting rules.
+ * The formatting rule can be specified in two types as follows:
+ * - If you specify the rules as an object option:
+ * ```
+ * // { "columnPropertyName": [["ruleName", arguments[0], arguments[1]...]] }
+ * new N.formatter(data, {
+ * "numeric": [["trimtoempty"], ["numeric", "#,###.##0000"]],
+ * "generic": [["trimtoempty"], ["generic", "@@ABCD"]],
+ * "limit": [["trimtoempty"], ["limit", "13", "..."]],
+ * "etc": [["date", 12]]
+ * }).format();
+ * ```
+ * - If you specify the rules by providing a jQuery object which includes elements with data-validate attributes:
+ * ```
+ * ...
+ *
+ *
+ *
+ *
+ * ...
+ *
+ *
+ * ```
+ * If you set formatting rules declaratively and want to change the formatting rules dynamically, you just need to reassign the value of the "format" data attribute for the corresponding input element as follows:
+ * ```
+ * N("#limit").data("format", [["trimtoempty"]])
+ * ```
+ *
+ * @returns {ND.Formatter} A new N.format instance.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html
+ */
+ formatter(rules?: NJS | HTMLElement | ND.FormatRuleObject | string): ND.Formatter;
+ /**
+ * Validator (N.validator) is a library that validates an input data set (array of JSON objects) and returns the result data set.
+ * - Instead of a ruleset, if you pass an element that wraps input elements with validation rules declared in the data-validate attribute, it will validate the value entered in the element when the cursor focusout occurs on the input element. If validation fails, an error message is displayed in the form of a tooltip near the input element.
+ * - Validation can also be performed on strings, not just datasets.
+ *
+ * @param {NJS|HTMLElement|ND.ValidationRuleObject|string} [rules] - Specifies the validation rules.
+ * You can specify the validation rules in two ways as follows:
+ * - Specifying rules as object options:
+ * ```
+ * // { "columnName": [["ruleName", arguments[0], arguments[1] ... ] }
+ * N.validator(data, {
+ * "numeric": [["required"], ["integer+commas"]],
+ * "generic": [["required"], ["korean"]],
+ * "limit": [["required"], ["alphabet"]]
+ * }).validate();
+ * ```
+ *
+ * - Specifying rules by passing a jQuery object that wraps elements with data-validate attributes:
+ * ```
+ * ...
+ *
+ *
+ *
+ *
+ * ...
+ *
+ *
+ * ```
+ *
+ * To dynamically change the validation rules when specifying validation rules declaratively, reassign the validation rules to the "validate" data attribute of the input element as follows:
+ *
+ * ```
+ * N("#numeric").data("validate", [["required"], ["integer"]])
+ * ```
+ *
+ * @returns {ND.Validator} A new N.validate instance.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html
+ */
+ validator(rules?: NJS | HTMLElement | ND.ValidationRuleObject | string): ND.Validator;
+ /**
+ * Extracts data that matches the specified condition.
+ *
+ * @param {ND.ConditionCallback | string} condition - Specifies the filtering condition.
+ *
+ * If you specify a function, only the rows for which the function returns true are filtered.
+ * ```
+ * var fData = N.data.filter([
+ * { name: "John", age: 18 },
+ * { name: "Mike", age: 16 },
+ * { name: "Mike", age: 14 }
+ * ], function(item) {
+ * return item.name === "Mike" && item.age === 16;
+ * });
+ *
+ * console.log(fData); // [{ name: "Mike", age: 16 }]
+ * ```
+ *
+ * If you specify a condition string, only the rows that match the condition are filtered.
+ * ```
+ * var fData = N.data.filter([
+ * { name: "John", age: 18 },
+ * { name: "Mike", age: 16 },
+ * { name: "Mike", age: 14 }
+ * ], 'name === "Mike"');
+ *
+ * console.log(fData); // [{ name: "Mike", age: 16 }, { name: "Mike", age: 14 }]
+ * ```
+ * > Processing conditions with a function is faster than specifying them with a string.
+ *
+ * > Specifying conditions with a string does not support and(&&) or or(||) expressions and supports only a single condition expression.
+ * @return {NJS} A new JSON object array containing the elements that satisfy the provided condition.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0303.html&tab=html/naturaljs/refr/refr030302.html
+ */
+ datafilter(this: NJS, condition: ND.ConditionCallback | string): NJS;
+ /**
+ * Sorts the data based on the specified "key" argument value.
+ *
+ * @param {string} key - The property name of the JSON object to be used as the sorting criteria
+ * @param {string} [reverse] - If set to true, sorts in descending order.
+ * @return {NJS} A new JSON object array containing the sorted elements.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0303.html&tab=html/naturaljs/refr/refr030302.html
+ */
+ datasort(this: NJS, key: string, reverse?: boolean): NJS;
+ /**
+ * This class handles data synchronization logic for two-way data binding.
+ */
+ static ds: {
+ instance(inst: NC.Instance, isReg?: boolean): ND.DataSync;
+ };
+ static formatter: {
+ /**
+ * Formatter(N.formatter) is a library that formats an input data set (array of JSON objects) and returns the formatted data set.
+ * - Instead of using a ruleset, you can pass an element as an argument, where the element wraps elements with formatting rules declared in the data-format attribute. This will display the formatted string in those elements. If the element is a text input element, it will display the original string of the data when the cursor focuses in (focusin event), and display the formatted string when the cursor focuses out (focusout event).
+ * - You can also format on a per-string basis rather than using a dataset.
+ *
+ * @param {NJS} data - The data to be formatted.
+ * @param {NJS | HTMLElement | ND.FormatRuleObject | string} [rules] - Specifies formatting rules.
+ * The formatting rule can be specified in two types as follows:
+ * - If you specify the rules as an object option:
+ * ```
+ * // { "columnPropertyName": [["ruleName", arguments[0], arguments[1]...]] }
+ * new N.formatter(data, {
+ * "numeric": [["trimtoempty"], ["numeric", "#,###.##0000"]],
+ * "generic": [["trimtoempty"], ["generic", "@@ABCD"]],
+ * "limit": [["trimtoempty"], ["limit", "13", "..."]],
+ * "etc": [["date", 12]]
+ * }).format();
+ * ```
+ * - If you specify the rules by providing a jQuery object which includes elements with data-validate attributes:
+ * ```
+ * ...
+ *
+ *
+ *
+ *
+ * ...
+ *
+ *
+ * ```
+ * If you set formatting rules declaratively and want to change the formatting rules dynamically, you just need to reassign the value of the "format" data attribute for the corresponding input element as follows:
+ * ```
+ * N("#limit").data("format", [["trimtoempty"]])
+ * ```
+ *
+ * @returns {ND.Formatter} A new N.format instance.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html
+ */
+ new(
+ data: NJS,
+ rules?: NJS | HTMLElement | ND.FormatRuleObject | string,
+ ): ND.Formatter;
+ /**
+ * Adds commas(,) at thousand separators. It processes only the part before the decimal point, if present.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ commas(str: string): string;
+ /**
+ * Convert to South Korea's resident registration number format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number, string]} args - Replaces the entered string with the specified character.
+ * - args[0]: Length of string to replace
+ * - args[1]: Character to replace
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ rrn(str: string, args: [number, string]): string;
+ /**
+ * Convert to US Social Security number format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ ssn(str: string): string;
+ /**
+ * Convert to South Korea's business registration number format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ kbrn(str: string): string;
+ /**
+ * Convert to South Korea's corporate number format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ kcn(str: string): string;
+ /**
+ * Convert to uppercase.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ upper(str: string): string;
+ /**
+ * Convert to lowercase.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ lower(str: string): string;
+ /**
+ * Converts the first alphabetic character to uppercase.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ capitalize(str: string): string;
+ /**
+ * Convert to South Korea's zip code format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ zipcode(str: string): string;
+ /**
+ * Convert to South Korea's phone number format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ phone(str: string): string;
+ /**
+ * Remove meaningless zeros.
+ * - 0100.0 -> 100
+ * - 0100.10 -> 100.1
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ realnum(str: string): string;
+ /**
+ * Removes the first and last whitespace from a string. If the input string is null or undefined, it is converted to an empty string.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ trimtoempty(str: string): string;
+ /**
+ * Removes the first and last whitespace from a string. If the input string is empty, null, or undefined, it is converted to 0.
+ *
+ * @param {string} str - The string to be formatted.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ trimtozero(str: string): string;
+ /**
+ * Removes the first and last whitespace from a string. If the input string is empty, null, or undefined, it is converted to valStr.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[string]} args - String to be replaced when the value is null or undefined
+ * - args[0]: String to replace
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ trimtoval(str: string, args: [string]): string;
+ /**
+ * Converts or formats a date string according to specified options and returns the formatted date string.
+ *
+ * The global date format can be set in the N.context.attr("data").formatter.date property of [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html&tab=html/naturaljs/refr/refr010204.html).
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number | string, "date" | "month", NU.Options.Datepicker]} args - Specifies the date format and options for the Datepicker component applied to the element designated as the third argument of the function.
+ * - args[0]:: Specifies the date format in either a numeric or string format as follows:
+ * - number
+ * - 4: year
+ * - 6: year-month
+ * - 8: year-month-day
+ * - 10: year-month-day hour
+ * - 12: year-month-day hour:minute
+ * - 14: year-month-day hour:minute:second
+ * - string
+ * - Y: year (4 digits)
+ * - y: year (2 digits)
+ * - m: month
+ * - d: day
+ * - H: hour
+ * - i: minute
+ * - s: second
+ * ```
+ * "1999/12/31": "Y/m/d"
+ * "99/12/31": "y/m/d"
+ * "31/12": "d/m"
+ * "12/31/1999": "m/d/Y"
+ * "1999-12-31 12:01:59": "Y-m-d H:i:s"
+ * ```
+ * - args[1]:: If "date", a date picker is applied to the element specified as the third argument. If "month", a month picker is applied.
+ * - args[2]:: You can specify options to create the Datepicker for the element designated as the third argument of the function.
+ * @param {NJS} [ele] - If this argument is specified, the NU.datepicker component is automatically applied.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ date(
+ str: string,
+ args: [number | string, "date" | "month", NU.Options.Datepicker],
+ ele?: NJS,
+ ): string;
+ /**
+ * Convert to time format.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number]} [args] - Specifies the time format.
+ * number If you specify the length by type, it is converted as follows:
+ * - 2: hour
+ * - 4: hour:minute
+ * - 6: hour:minute:second
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ time(str: string, args?: [number]): string;
+ /**
+ * Cuts the string to a specified length.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number, string]} args
+ * - args[0]: - String maximum length.
+ * - args[1]: - Character to be appended after cutting the string.
+ * @param {NJS} ele - An element that will display the original, uncut string as the title attribute.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ limit(str: string, args: [number, string], ele: NJS): string;
+ /**
+ * Replaces a string with a specified string.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number, string, boolean]} args
+ * - args[0]: - String to be replaced
+ * - args[1]: - String to replace
+ * - args[2]: - This is an argument used inside Formatter that is not generally used.
+ * @param {NJS} [ele] - This is an argument used inside Formatter that is not generally used.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ replace(str: string, args: [string, number, boolean], ele?: NJS): string;
+ /**
+ * Fill with filler characters from the left to the specified length.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number, string]} args
+ * - args[0]: - Length of string to be converted.
+ * - args[1]: - Filler character.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ lpad(str: string, args: [number, string]): string;
+ /**
+ * Fill with filler characters from the right to the specified length.
+ *
+ * @param {string} str - The string to be formatted.
+ * @param {[number, string]} args
+ * - args[0]: - Length of string to be converted.
+ * - args[1]: - Filler character.
+ * @return {string} The formatted string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ rpad(str: string, args: [number, string]): string;
+ /**
+ * Fill with filler characters from the right to the specified length.
+ *
+ * @param {string} str - The string to be masked.
+ * @param {[ND.FormatMaskingRules, string]} args
+ * - args[0]: - Masking Type
+ * - "phone": Masks phone number.
+ * - "email": Masks email address.
+ * - "address": Masks address.
+ * - "name": Masks name.
+ * - "rrn": Masks South Korea's resident registration number.
+ * - args[1]: - Masking character.
+ * If not entered, it will be replaced with the "*" character.
+ * @return {string} The masked string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ mask(str: string, args: [ND.FormatMaskingRules, string]): string;
+ /**
+ * Format the string using a user format.
+ *
+ * > The generic and numeric rules are developed based on the [Mask JavaScript API (v0.4b)](https://pengoworks.com/workshop/js/mask/) library.
+ * > The date masking part has been removed, and functionality has been changed to add recognition for Korean characters and handling for values less than 0 (values after the decimal point), allowing * characters and space characters (existing * characters are converted to ~ characters).
+ * > For detailed usage and examples, please refer to the link [here](https://pengoworks.com/workshop/js/mask/).
+ *
+ * - #: Numbers, spaces
+ * - @: Korean characters (consonants/vowels), English letters, spaces
+ * - ~: Korean characters (consonants/vowels), English letters, numbers, spaces
+ *
+ * Example)
+ * ```
+ * mask: ~~~~'~-~~~
+ * string: namesdan
+ * result: name's-dan
+ *
+ * mask: (###) ###-####
+ * string: 614-777-6094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 6147776094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 614.777.6094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 6147a76094
+ * result: 6147a76094
+ *
+ * mask: (###) #x*-####
+ * string: 6147a76094
+ * result: (614) 7a7-6094
+ *
+ * mask: ###.###.####
+ * string: 614-777-6094
+ * result: 614.777.6094
+ *
+ * mask: ###/###.####
+ * string: 614-777-6094
+ * result: 614/777.6094
+ *
+ * mask: phone !#: ###/###.####
+ * string: 614-777-6094
+ * result: phone !: 614/777.6094
+ * ```
+ * @param {string} str - The string to be masked.
+ * @param {[string]} args
+ * - args[0]: - User format string
+ * @return {string} The masked string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ generic(str: string, args: [string]): string;
+ /**
+ * Format a numeric string using a custom format.
+ *
+ * > The generic and numeric rules are developed based on the [Mask JavaScript API (v0.4b)](https://pengoworks.com/workshop/js/mask/) library.
+ * > The date masking part has been removed, and functionality has been changed to add recognition for Korean characters and handling for values less than 0 (values after the decimal point), allowing * characters and space characters(existing * characters are converted to ~ characters).
+ * > For detailed usage and examples, please refer to the link [here](https://pengoworks.com/workshop/js/mask/).
+ *
+ * - #: Numbers, spaces
+ * - @: Korean characters (consonants/vowels), English letters, spaces
+ * - ~: Korean characters (consonants/vowels), English letters, numbers, spaces
+ *
+ * Example)
+ * ```
+ * mask: ~~~~'~-~~~
+ * string: namesdan
+ * result: name's-dan
+ *
+ * mask: (###) ###-####
+ * string: 614-777-6094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 6147776094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 614.777.6094
+ * result: (614) 777-6094
+ *
+ * mask: (###) ###-####
+ * string: 6147a76094
+ * result: 6147a76094
+ *
+ * mask: (###) #x*-####
+ * string: 6147a76094
+ * result: (614) 7a7-6094
+ *
+ * mask: ###.###.####
+ * string: 614-777-6094
+ * result: 614.777.6094
+ *
+ * mask: ###/###.####
+ * string: 614-777-6094
+ * result: 614/777.6094
+ *
+ * mask: phone !#: ###/###.####
+ * string: 614-777-6094
+ * result: phone !: 614/777.6094
+ * ```
+ * @param {string} str - The string to be masked.
+ * @param {[string, "ceil" | "floor" | "round"]} args
+ * - args[0]: - User format string
+ * - args[1]: - Depending on the entered value, decimal points are processed as follows.
+ * - ceil: Unconditionally round up (decimal point processing possible)
+ * - floor: Unconditionally discard (decimal point processing possible)
+ * - round: Rounding (possible to handle decimal points)
+ * @return {string} The masked string.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0301.html&tab=html/naturaljs/refr/refr030106.html
+ */
+ numeric(str: string, args: [string, "ceil" | "floor" | "round"]): string;
+ };
+
+ static validator: {
+ /**
+ * Validator (N.validator) is a library that validates an input data set (array of JSON objects) and returns the result data set.
+ * - Instead of a ruleset, if you pass an element that wraps input elements with validation rules declared in the data-validate attribute, it will validate the value entered in the element when the cursor focusout occurs on the input element. If validation fails, an error message is displayed in the form of a tooltip near the input element.
+ * - Validation can also be performed on strings, not just datasets.
+ *
+ * @param {NJS} data - The data to be validated.
+ * @param {NJS|HTMLElement|ND.ValidationRuleObject|string} [rules] - Specifies the validation rules.
+ * You can specify the validation rules in two ways as follows:
+ * - Specifying rules as object options:
+ * ```
+ * // { "columnName": [["ruleName", arguments[0], arguments[1] ... ] }
+ * N.validator(data, {
+ * "numeric": [["required"], ["integer+commas"]],
+ * "generic": [["required"], ["korean"]],
+ * "limit": [["required"], ["alphabet"]]
+ * }).validate();
+ * ```
+ *
+ * - Specifying rules by passing a jQuery object that wraps elements with data-validate attributes:
+ * ```
+ * ...
+ *
+ *
+ *
+ *
+ * ...
+ *
+ *
+ * ```
+ *
+ * To dynamically change the validation rules when specifying validation rules declaratively, reassign the validation rules to the "validate" data attribute of the input element as follows:
+ *
+ * ```
+ * N("#numeric").data("validate", [["required"], ["integer"]])
+ * ```
+ *
+ * @returns {ND.Validator} A new N.validate instance.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html
+ */
+ new(
+ data: NJS,
+ rules?: NJS | HTMLElement | ND.ValidationRuleObject | string,
+ ): ND.Validator;
+ /**
+ * Checks required input.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ required(str: string): boolean;
+ /**
+ * Checks whether only English characters are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ alphabet(str: string): boolean;
+ /**
+ * Checks whether only numbers (integers) are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ integer(str: string): boolean;
+ /**
+ * Checks whether only Korean characters are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ korean(str: string): boolean;
+ /**
+ * Checks whether only English characters and numbers (integers) are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ alphabet_integer(str: string): boolean;
+ /**
+ * Checks whether only numbers (integers) and Korean characters are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ integer_korean(str: string): boolean;
+ /**
+ * Checks whether only English and Korean characters are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ alphabet_korean(str: string): boolean;
+ /**
+ * Checks whether only English characters, numbers (integers), and Korean characters are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ alphabet_integer_korean(str: string): boolean;
+ /**
+ * Checks whether only numbers (integers) and dashes (-) are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ dash_integer(str: string): boolean;
+ /**
+ * Checks whether only numbers (integers) and commas (,) are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ commas_integer(str: string): boolean;
+ /**
+ * Checks whether only numbers (integers), commas (,), and dots (.) are entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ number(str: string): boolean;
+ /**
+ * Checks if it matches email address format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ email(str: string): boolean;
+ /**
+ * Checks if it matches URL format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ url(str: string): boolean;
+ /**
+ * Checks if it matches South Korea's postal code format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ zipcode(str: string): boolean;
+ /**
+ * Checks whether the specified number of decimal places has been entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number]} args
+ * - args[0]: - Decimal point length.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ decimal(str: string, args: NC.Primitive[]): boolean;
+ /**
+ * Checks if it matches the South Korea's phone number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[boolean]} args
+ * - args[0]: - If true, true is returned even if only 1 of the last 4 digits of the phone number is entered.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ phone(str: string, args: [boolean]): boolean;
+ /**
+ * Checks if it matches the South Korea's resident registration number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ rrn(str: string): boolean;
+ /**
+ * Checks if it matches the U.S. Social Security number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ ssn(str: string): boolean;
+ /**
+ * Checks if it matches the South Korea's alien registration number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ frn(str: string): boolean;
+ /**
+ * Checks if it matches the South Korea's alien registration number or resident registration number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ frn_rrn(str: string): boolean;
+ /**
+ * Checks if it matches the South Korea's corporate number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ kbrn(str: string): boolean;
+ /**
+ * Checks if it matches the South Korea's business registration number format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ kcn(str: string): boolean;
+ /**
+ * Checks if it matches the date format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ date(str: string): boolean;
+ /**
+ * Checks if it matches the time format.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ time(str: string): boolean;
+ /**
+ * Checks whether the specified value has been entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ accept(str: string, args: [string]): boolean;
+ /**
+ * Checks whether an unspecified value has been entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ notaccept(str: string, args: [string]): boolean;
+ /**
+ * Checks whether the specified value is included.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ match(str: string, args: [string]): boolean;
+ /**
+ * Checks whether the specified value is not included.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ notmatch(str: string, args: [string]): boolean;
+ /**
+ * Checks whether the specified file extension has been entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ acceptfileext(str: string, args: [string]): boolean;
+ /**
+ * Checks whether an unspecified file extension has been entered.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[string]} args
+ * - args[0]: String to compare.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ notacceptfileext(str: string, args: [string]): boolean;
+ /**
+ * Checks whether the value of the specified input element is equal to the value.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[JQuery.Selector]} args
+ * - args[0]: jQuery selector string to select input element.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ equalTo(str: string, args: [JQuery.Selector]): boolean;
+ /**
+ * Checks whether the input string length is less than the specified length.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number]} args
+ * - args[0]: Maximum string length to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ maxlength(str: string, args: [number]): boolean;
+ /**
+ * Checks whether the input string length is greater than the specified length.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number]} args
+ * - args[0]: Minimum string length to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ /* eslint-disable-next-line @definitelytyped/no-single-element-tuple-type */
+ minlength(str: string, args: [number]): boolean;
+ /**
+ * Checks whether the input string length is between the specified lengths.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number, number]} args
+ * - args[0]: Minimum string length to allow.
+ * - args[1]: Maximum string length to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ rangelength(str: string, args: [number, number]): boolean;
+ /**
+ * Checks whether the byte length of input string is less than the specified length.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number, number]} args
+ * - args[0]: Maximum byte length to allow.
+ * - args[1]: This is the byte length of Hangul and Hangul special characters, excluding English characters, numbers, and basic special characters.
+ * > If not entered, the N.context.attr("core").charByteLength value from Config(natural.config.js) is applied.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ maxbyte(str: string, args: [number, number]): boolean;
+ /**
+ * Checks whether the byte length of input string is greater than the specified length.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number, number]} args
+ * - args[0]: Minimum byte length to allow.
+ * - args[1]: This is the byte length of Hangul and Hangul special characters, excluding English characters, numbers, and basic special characters.
+ * > If not entered, the N.context.attr("core").charByteLength value from Config(natural.config.js) is applied.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ minbyte(str: string, args: [number, number]): boolean;
+ /**
+ * Checks whether the byte length of input string is between the specified lengths.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number, number, number]} args
+ * - args[0]: Minimum byte length to allow.
+ * - args[1]: Maximum byte length to allow.
+ * - args[2]: This is the byte length of Hangul and Hangul special characters, excluding English characters, numbers, and basic special characters.
+ * > If not entered, the N.context.attr("core").charByteLength value from Config(natural.config.js) is applied.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ rangebyte(str: string, args: [number, number, number]): boolean;
+ /**
+ * Checks whether the input number value is less than the specified value.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number]} args
+ * - args[0]: Maximum number value to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ maxvalue(str: string, args: [number, number]): boolean;
+ /**
+ * Checks whether the input number value is greater than the specified value.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number]} args
+ * - args[0]: Minimum number value to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ minvalue(str: string, args: [number, number]): boolean;
+ /**
+ * Checks whether the input number value is between the specified values.
+ *
+ * @param {string} str - The string to be checked.
+ * @param {[number, number]} args
+ * - args[0]: Minimum number value to allow.
+ * - args[1]: Maximum number value to allow.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ rangevalue(str: string, args: [number, number]): boolean;
+ /**
+ * Tests whether a string matches a given regular expression pattern.
+ *
+ * @param {string} str - The string to be tested against the regular expression.
+ * @param {[string, string]} args
+ * - args[0]: Regular expression pattern.
+ * - args[1]: Flags used to define the search
+ * behavior of the pattern.
+ * @return {boolean} - Validation result.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0302.html&tab=html/naturaljs/refr/refr030206.html
+ */
+ regexp(str: string, args: [string, string]): boolean;
+ };
+ static data: {
+ /**
+ * Extracts data that matches the specified condition.
+ *
+ * @param {NJS | NC.JSONObject[]} arr - The data to filter
+ * @param {ND.ConditionCallback | string} condition - Specifies the filtering condition.
+ *
+ * If you specify a function, only the rows for which the function returns true are filtered.
+ * ```
+ * var fData = N.data.filter([
+ * { name: "John", age: 18 },
+ * { name: "Mike", age: 16 },
+ * { name: "Mike", age: 14 }
+ * ], function(item) {
+ * return item.name === "Mike" && item.age === 16;
+ * });
+ *
+ * console.log(fData); // [{ name: "Mike", age: 16 }]
+ * ```
+ *
+ * If you specify a condition string, only the rows that match the condition are filtered.
+ * ```
+ * var fData = N.data.filter([
+ * { name: "John", age: 18 },
+ * { name: "Mike", age: 16 },
+ * { name: "Mike", age: 14 }
+ * ], 'name === "Mike"');
+ *
+ * console.log(fData); // [{ name: "Mike", age: 16 }, { name: "Mike", age: 14 }]
+ * ```
+ * > Processing conditions with a function is faster than specifying them with a string.
+ *
+ * > Specifying conditions with a string does not support and(&&) or or(||) expressions and supports only a single condition expression.
+ * @return {NJS} A new JSON object array containing the elements that satisfy the provided condition.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0303.html&tab=html/naturaljs/refr/refr030302.html
+ */
+ filter(
+ arr: NJS | NC.JSONObject[],
+ condition: ND.ConditionCallback | string,
+ ): NJS | NC.JSONObject[];
+ sortBy(key: string, reverse: 1 | -1): (a: number, b: number) => 1 | -1 | 0;
+ /**
+ * Sorts the data based on the specified "key" argument value.
+ *
+ * @param {NJS | NC.JSONObject[]} arr - Data to be sorted
+ * @param {string} key - The property name of the JSON object to be used as the sorting criteria
+ * @param {string} [reverse] - If set to true, sorts in descending order.
+ * @return {NJS} A new JSON object array containing the sorted elements.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0303.html&tab=html/naturaljs/refr/refr030302.html
+ */
+ sort(
+ arr: NJS | NC.JSONObject[],
+ key: string,
+ reverse?: boolean,
+ ): NJS | NC.JSONObject[];
+ };
+}
+
+declare namespace ND {
+ interface Formatter {
+ /**
+ * TODO Please add a comment.
+ */
+ format(row: number): ND.FormatResultObject;
+ /**
+ * TODO Please add a comment.
+ */
+ unformat(row: number, key: string): NC.Primitive;
+ }
+
+ interface Validator {
+ /**
+ * TODO Please add a comment.
+ */
+ validate(row: number): ND.ValidateResultObject;
+ }
+
+ interface DataSync {
+ viewContext: NJS;
+ /**
+ * TODO Please add a comment.
+ */
+ remove(): DataSync;
+ /**
+ * TODO Please add a comment.
+ */
+ notify(row: number, key: string): DataSync;
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.data.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.data.misc.d.ts
new file mode 100644
index 0000000..e31e323
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.data.misc.d.ts
@@ -0,0 +1,106 @@
+declare namespace ND {
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum FormatRules {
+ COMMAS = "commas",
+ RRN = "rrn",
+ SSN = "ssn",
+ KBRN = "kbrn",
+ KCN = "kcn",
+ UPPER = "upper",
+ LOWER = "lower",
+ CAPITALIZE = "capitalize",
+ ZIPCODE = "zipcode",
+ PHONE = "phone",
+ REALNUM = "realnum",
+ TRIMTOEMPTY = "trimtoempty",
+ TRIMTOZERO = "trimtozero",
+ TRIMTOVAL = "trimtoval",
+ DATE = "date",
+ TIME = "time",
+ LIMIT = "limit",
+ REPLACE = "replace",
+ LPAD = "lpad",
+ RPAD = "rpad",
+ MASK = "mask",
+ GENERIC = "generic",
+ NUMERIC = "numeric",
+ }
+
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum FormatMaskingRules {
+ PHONE = "phone",
+ EMAIL = "email",
+ ADDRESS = "address",
+ NAME = "name",
+ RRN = "rrn",
+ }
+
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum ValidationRules {
+ REQUIRED = "required",
+ ALPHABET = "alphabet",
+ INTEGER = "integer",
+ KOREAN = "korean",
+ ALPHABET_INTEGER = "alphabet_integer",
+ INTEGER_KOREAN = "integer_korean",
+ ALPHABET_KOREAN = "alphabet_korean",
+ ALPHABET_INTEGER_KOREAN = "alphabet_integer_korean",
+ DASH_INTEGER = "dash_integer",
+ COMMAS_INTEGER = "commas_integer",
+ NUMBER = "number",
+ EMAIL = "email",
+ URL = "url",
+ ZIPCODE = "zipcode",
+ DECIMAL = "decimal",
+ PHONE = "phone",
+ RRN = "rrn",
+ SSN = "ssn",
+ FRN = "frn",
+ FRN_RRN = "frn_rrn",
+ KBRN = "kbrn",
+ KCN = "kcn",
+ DATE = "date",
+ TIME = "time",
+ ACCEPT = "accept",
+ MATCH = "match",
+ ACCEPTFILEEXT = "acceptfileext",
+ NOTACCEPT = "notaccept",
+ NOTMATCH = "notmatch",
+ NOTACCEPTFILEEXT = "notacceptfileext",
+ EQUALTO = "equalTo",
+ MAXLENGTH = "maxlength",
+ MINLENGTH = "minlength",
+ RANGELENGTH = "rangelength",
+ MAXBYTE = "maxbyte",
+ MINBYTE = "minbyte",
+ RANGEBYTE = "rangebyte",
+ MAXVALUE = "maxvalue",
+ MINVALUE = "minvalue",
+ RANGEVALUE = "rangevalue",
+ REGEXP = "regexp",
+ }
+
+ interface FormatRuleObject {
+ [key: string]: [FormatRules, ...NC.Primitive[]][];
+ }
+
+ interface ValidationRuleObject {
+ [key: string]: [ValidationRules, ...NC.Primitive[]][];
+ }
+
+ interface FormatResultObject {
+ [key: string]: string;
+ }
+
+ type ValidateResultObject = {
+ [key: string]: {
+ rule: string;
+ result: boolean;
+ msg: string | null;
+ }[];
+ }[];
+
+ interface ConditionCallback {
+ (item: object): boolean;
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.js.d.ts b/src/main/resources/static/js/natural_js/@types/natural.js.d.ts
new file mode 100644
index 0000000..86423dd
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.js.d.ts
@@ -0,0 +1,300 @@
+/**
+ * N() is a core method of Natural-JS. It returns a collection of matched elements found in the DOM based on the provided arguments or creates elements matching the given HTML string.
+ *
+ * N() extends the jQuery() function, thus it can be replaced with $() or jQuery(). However, local functions of the N object cannot be used within jQuery or $ objects.
+ */
+declare function N(
+ selector?: NC.Selector,
+ context?: Element | Document | JQuery | string | NJS,
+): NJS;
+
+interface NJS extends Omit, NC, NA, ND, NU, NUS {
+ version: {
+ "Natural-JS": string;
+ "Natural-CORE": string;
+ "Natural-ARCHITECTURE": string;
+ "Natural-DATA": string;
+ "Natural-UI": string;
+ "Natural-UI.Shell": string;
+ "Natural-CODE": string;
+ "Natural-TEMPLATE": string;
+ };
+
+ selector: string;
+
+ [index: number]: T extends Array ? T[number] : never;
+}
+
+/**
+ * N is a collection class that defines common functions for Natural-JS.
+ */
+declare namespace N {
+ // === Natural-CORE
+ const locale: typeof NC.locale;
+ const debug: typeof NC.debug;
+ const log: typeof NC.log;
+ const info: typeof NC.info;
+ const warn: typeof NC.warn;
+ const error: typeof NC.error;
+ const type: typeof NC.type;
+ const isString: typeof NC.isString;
+ const isNumeric: typeof NC.isNumeric;
+ const isPlainObject: typeof NC.isPlainObject;
+ const isEmptyObject: typeof NC.isEmptyObject;
+ const isArray: typeof NC.isArray;
+ const isArraylike: typeof NC.isArraylike;
+ const isWrappedSet: typeof NC.isWrappedSet;
+ const isElement: typeof NC.isElement;
+ const toSelector: typeof NC.toSelector;
+ const serialExecute: typeof NC.serialExecute;
+ const gc: typeof NC.gc;
+ const string: typeof NC.string;
+ const date: typeof NC.date;
+ const element: typeof NC.element;
+ const browser: typeof NC.browser;
+ const message: typeof NC.message;
+ const array: typeof NC.array;
+ const json: typeof NC.json;
+ const event: typeof NC.event;
+ const mask: typeof NC.mask;
+
+ // === Natural-ARCHITECTURE
+ /**
+ * Performs asynchronous HTTP (Ajax) requests in `N.comm`.
+ *
+ * @see https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
+ */
+ const ajax: typeof NA.ajax;
+ /**
+ * N.comm is a library that supports Ajax communication with the server, such as requesting content or data from the server or passing parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0203.html
+ */
+ function comm(obj: NJS | string, url?: string | NA.Options.Request): NA.Communicator;
+ /**
+ * N.cont executes the init function of the Controller object and returns the Controller object.
+ *
+ * > The Controller object is an object that controls the elements of the View and the data retrieved from the Communicator.
+ *
+ * N.cont should be declared immediately below the View area of the page, like this:
+ *
+ * ```
+ *
+ *
View area
+ *
+ *
+ *
+ * ```
+ *
+ * If you load a page with the above structure using the N.popup, N.tab component or N.comm library, the init function of the Controller object is called when page loading is complete.
+ *
+ * > For Natural-ARCHITECTURE-based pages to function properly, they must be loaded with the N.comm library, N.popup, or N.tab components.
+ *
+ * > When selecting an element on a page, you must `find` on a view or specify view as the `context` argument (second argument) to a jQuery function.
+ * Otherwise, unintended elements from other block pages may be selected, resulting in unpredictable errors.
+ * For more information, please refer to the [Restrictions and Tips](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0601.html) menu.
+ *
+ * > When `N(".view").cont()` is executed, a `pageid data attribute value` such as `data-pageid="view"` is created in the `.view` element specified by the selector.
+ * The `pageid` is `.(dot), #(sharp), [(left bracket), ](right bracket), '(single quote), :(colon), ((left bracket), ), )(right bracket), >(right arrow bracket), " "(space), -(hyphen)` characters are removed to create pageid, so the page identification value is defined not to include the special characters.
+ * For example, `N("page.view-01").cont()` creates a pageid of `pageview01` with the dot and hyphen removed.
+ *
+ * To control a specific page, such as a block page or tab content, you can get a Controller object as follows.
+ * ```
+ * var page01Cont = N("#page01").instance("cont");
+ * page01Cont.gridInst.bind([]);
+ * ```
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0201.html
+ */
+ const cont: typeof NA.cont;
+ /**
+ * Context (N.context) is a space that guarantees data persistence within the life-cycle (until the page is loaded and redirected to another URL) of a Natural-JS-based application.
+ *
+ * Natural-JS's [configuration values](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html), framework common messages, etc. are stored in the N.context object.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0206.html
+ */
+ const context: typeof NA.context;
+ /**
+ * Config(natural.config.js) stores the operational environment settings, AOP settings, Communication Filter settings,
+ * and global option values for UI components of Natural-JS.
+ *
+ * The settings are defined in the natural.config.js file and are saved as separate attribute values for each package in N.context.
+ * - N.context.attr("core"): Basic settings for the Natural-CORE package libraries.
+ * - N.context.attr("architecture"): Basic settings for the Natural-ARCHITECTURE package libraries.
+ * - N.context.attr("data"): Basic settings for the Natural-DATA package libraries.
+ * - N.context.attr("ui"): Basic settings for the Natural-UI package libraries.
+ * - N.context.attr("ui.shell"): Basic settings for the Natural-UI.Shell package libraries.
+ *
+ * The following two attributes are essential when applying Natural-JS:
+ *
+ * The following two attributes are essential when applying Natural-JS:
+ * 1. N.context.attr("architecture").page.context: Specifies the container area (element) where the web application's content will be displayed as a jQuery selector string.
+ * > It is automatically entered when using the Documents(N.docs) component.
+ *
+ * > If the web application is built as an SPA (Single Page Application), specify the element that loads the menu page. Otherwise, enter "body" or the element wrapping the entire content.
+ * 2. N.context.attr("ui").alert.container: Specifies the area (element) where elements of the N.alert and N.popup components will be stored as a jQuery selector string.
+ * > It is automatically entered when using the Documents(N.docs) component.
+ *
+ * > If the web application is built as an SPA (Single Page Application), specify the element that loads the menu page. Otherwise, enter "body" or the element wrapping the entire content.
+ *
+ * The order in which component options are applied is as follows:
+ * 1. Option values specified when initializing the component.
+ * 2. Option values specified in Config(natural.config.js).
+ * 3. The component’s default option values.
+ * > If you set a global event option, the global event is executed first, followed by the event specified when initializing the component.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html
+ */
+ const config: typeof NA.config;
+
+ // === Natural-DATA
+ /**
+ * DataSync(N.ds) is a module in Natural-JS that handles two-way data binding.
+ */
+ const ds: typeof ND.ds;
+ const formatter: typeof ND.formatter;
+ const validator: typeof ND.validator;
+ /**
+ * The Natural-DATA library provides methods and functions for sorting, filtering, and refining data of type array[json object].
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0303.html
+ */
+ const data: typeof ND.data;
+
+ // === Natural-UI
+ /**
+ * This class defines common functions that support the development of Natural-UI components.
+ */
+ const ui: typeof NU.ui;
+ const alert: typeof NU.alert;
+ /**
+ * Button (N.button) is a UI component that creates buttons using the `a, input[type=button], button` elements specified by the context option.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html
+ */
+ const button: typeof NU.button;
+ /**
+ * Datepicker (N.datepicker) is a UI component that displays a calendar popup on the text input element specified by the context option, allowing you to select and input dates or months.
+ *
+ * - You can easily use the Datepicker by declaring the "date" rule in the data-format attribute of the text input element and linking it with data-related components. Refer to the ["date", 4|6|8|10|12|14, "month"|"date"] rules in the [Declarative Options] tab of the Form, List, Grid menu, and the [Format Rule List] tab of the Formatter menu.
+ *
+ * > For descriptions of declarative options, refer to the declarative options section of the [API Documentation Guide](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0001.html) menu.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html
+ */
+ const datepicker: typeof NU.datepicker;
+ /**
+ * Popup (N.popup) is a UI component that creates a layer popup using the internal element specified by the context option or the page specified by the url option.
+ *
+ * - When a popup is created with the page specified by the url option, the generated popup's Controller object will have caller (the N.popup instance that called it) and opener (the parent page's Controller object that called it, passed as an option during popup creation) properties. You can use the opener to control the parent page or use the caller to close itself or send data to the parent Controller.
+ *
+ * > If the Popup dialog box is not displayed, and an error occurs, you need to specify the top-level HTML element where N.alert related HTML elements will be stored using a jQuery selector string in the N.context.attr("ui").alert.container property of the [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html).
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html
+ */
+ const popup: typeof NU.popup;
+ /**
+ * Tab(N.tab) is a UI component that creates a tab page view using a context option specified element composed of div>ul>li tags.
+ *
+ * If a page specified with the url option is created as a popup, the Controller object of the created popup will have properties caller(the N.popup instance that called it) and opener(the parent page Controller object that called it, which must be passed as an option when creating the popup).
+ * You can use opener to control the parent page or use caller to close itself and send data to the parent Controller.
+ * By calling the cont method on an instance of N.tab, you can get the Controller objects of each tab page. For more details on the cont method, please refer to the [Function] tab.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html
+ */
+ const tab: typeof NU.tab;
+ /**
+ * Select(N.select) is a UI component that binds data to select, input[type=checkbox], input[type=radio] elements to create selection elements and extend the functionality of those controls.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html
+ */
+ const select: typeof NU.select;
+ /**
+ * Form(N.form) is a UI component that binds or creates single row data on an element (block elements like div, table) specified with the context option.
+ * - N.form integrates with components of the Natural-DATA package to simplify the data formatting and input data validation processes. For more details, please refer to the [Declarative Option] tab.
+ * - Data is bound when the property name (column name) of the bound data object matches the id attribute value of the element. Data formatting and validation are activated when data is bound to an element.
+ * - If elements within the context elements of N.form are specified again as context for N.form or other data-related components (e.g., N.grid, N.list), errors may occur or data synchronization issues may arise. Ensure that context elements for N.form are specified without duplication or that column data is split to avoid data redundancy. For how to separate context elements or data, please refer to the example > Multi Form Binding menu source code.
+ * > After adding to a form element created with add() and then calling bind(), or calling bind() after add() or bind() after bind(), the data synchronization logic for the form's input elements may have issues. In this case, be sure to execute the unbind method in between.
+ * > ```
+ * > var formInst = N([]).form().add();
+ * > formInst.unbind().bind(0, [{ "col01": "abcd" }])
+ * > ```
+ * - When the value of an input element is changed or the val method is used to change data, the rowStatus property is created, with "insert" for input, "update" for modification, and "delete" for deletion.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html
+ */
+ const form: typeof NU.form;
+ /**
+ * List(N.list) is a UI component that creates a data list in a single column format using ul>li elements specified with the context option.
+ *
+ * - N.list integrates with components of the Natural-DATA package to simplify the data formatting and input data validation processes. For more details, please refer to the [Declarative Option] tab.
+ * - Data is bound when the property name (column name) of the bound data object matches the id attribute value of the element. Data formatting and validation are activated when data is bound to an element.
+ * - When changing the value of an input element or the val method is used to change data, the rowStatus property is created, with "insert" for input, "update" for modification, and "delete" for deletion.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html
+ */
+ const list: typeof NU.list;
+ /**
+ * Grid(N.grid) is a UI component that creates a data list in a multi-column format using table elements specified with the context option.
+ * - N.grid integrates with components of the Natural-DATA package to simplify the data formatting and input data validation processes. For more details, please refer to the [Declarative Option] tab.
+ * - Data is bound when the property name (column name) of the bound data object matches the id attribute value of the element. Data formatting and validation are activated when data is bound to an element.
+ * - Provides two types of grids: fixed header and list type.
+ * - When changing the value of an input element or the val method is used to change data, the rowStatus property is created. The rowStatus value is "insert" for input, "update" for modification, and "delete" for deletion.
+ * - Provides many functions for handling list data, such as pasting Excel data, data filtering/sorting, etc. For more details on the provided functions, please refer to the option tab and function tab.
+ * > The width of the table element to be made into a grid must be specified, whether it is a fixed length (px) or a variable length (%).
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html
+ */
+ const grid: typeof NU.grid;
+ /**
+ * Pagination(N.pagination) is a UI component that creates paging indexes for list data or overall row counts.
+ * - The structure of the N.pagination context element consists of a div>ul>li>a hierarchy.
+ * - The N.pagination component can generate parameters for SQL paging or paginate full list data of type array[json object].
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html
+ */
+ const pagination: typeof NU.pagination;
+
+ /**
+ * Tree(N.tree) is a UI component that creates tree elements from hierarchical data.
+ * - A checkbox can be added to the nodes for group selection.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html
+ */
+ const tree: typeof NU.tree;
+
+ // === Natural-UI.Shell
+ /**
+ * Notify(N.notify) is a UI component that displays global notifications at a specified position without requiring user confirmation.
+ * > The Alert(N.alert) is used for handling messages within the content area, while N.notify handles messages site-wide. Thus, N.alert component elements are created within each View element, and N.notify is created in the document.body element.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0501.html
+ */
+ function notify(position: NUS.Options.NotifyPosition, opts?: NUS.Options.Notify): NUS.Notify;
+ /**
+ * Creates a message notification.
+ */
+ namespace notify {
+ const add: typeof NUS.notify.add;
+ }
+ /**
+ * Documents(N.docs) is a page container that displays menu pages based on Natural-JS in either MDI (Multi Document Interface) or SDI (Single Document Interface) structures.
+ * - Options such as the maximum number of pages and the maximum number of state-maintained pages can be specified. It can also display a loading indicator for the requests and responses of N.comm.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0502.html
+ */
+ const docs: typeof NUS.docs;
+ /**
+ * Natural-CODE
+ */
+ const code: typeof NCD;
+ /**
+ * Natural-TEMPLATE
+ */
+ const template: typeof NT;
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.template.d.ts b/src/main/resources/static/js/natural_js/@types/natural.template.d.ts
new file mode 100644
index 0000000..a15fc84
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.template.d.ts
@@ -0,0 +1,8 @@
+declare class NT {
+ static readonly aop: {
+ codes(cont: NA.Objects.Controller.Object, joinPoint: unknown): void;
+ template(cont: NA.Objects.Controller.Object, joinPoint: unknown): void;
+ components(cont: NA.Objects.Controller.Object, prop: string, compActionDefer: JQuery.Deferred[]): void;
+ events(cont: NA.Objects.Controller.Object, prop: string): void;
+ };
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.template.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.template.misc.d.ts
new file mode 100644
index 0000000..fbf72d1
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.template.misc.d.ts
@@ -0,0 +1,206 @@
+declare namespace NT {
+ namespace Options {
+ interface Extra {
+ /**
+ * After the component is initialized, the specified function is immediately executed.
+ * - string: Function name
+ * - ...any[]: Arguments of the function
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ action?: string | [string, ...any[]];
+ /**
+ * Purpose of Form - When you enter the string "search-box", the specified area is created as a search box Form. You can specify more detailed options with the object type.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ usage?: string | {
+ "search-box": {
+ defaultButton?: JQuery.Selector;
+ events?: {
+ event: string;
+ target: JQuery.Selector;
+ handler: NT.Objects.Controller.EventHandler;
+ }[];
+ };
+ };
+ }
+ /**
+ * Represents a function type for filtering an array of JSON objects.
+ *
+ * @param {NJS} data - Data to process.
+ * @returns {NJS} - Processed data.
+ */
+ interface SelectFilter {
+ (data: NJS): NJS;
+ }
+ interface Select {
+ /**
+ * Common code classification code - Set the classification code value of the code list to bind.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ code?: string;
+ /**
+ * The Communicator to retrieve the list - Specify `c.{serviceName}` declared in the Controller object.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ comm?: string;
+ /**
+ * Data to bind - You can directly create and bind data like [{}, {}] through the `data` option without specifying the `comm` option.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ data?: NC.JSONObject[];
+ /**
+ * Property name of the data bound to the label of the selection element - Set the property name to bind from the retrieved data object.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ key?: string;
+ /**
+ * Property name of the data bound to the value of the selection element - Set the property name to bind from the retrieved data object.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ val?: string;
+ /**
+ * Data filter - Filters the common code data before binding.
+ *
+ * ```
+ * "filter": function (data) {
+ * // If you process data (original data) and return it, the processed data is bound.
+ * return N(N.array.deduplicate(data, "age")).datasort("age"); // Sort after removing duplicates.
+ * }
+ * ```
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ filter?: SelectFilter;
+ /**
+ * Default selected value - Set the value of the default selection when the component is initialized.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ selected?: string;
+ }
+ }
+
+ namespace Objects {
+ namespace Controller {
+ /**
+ * EventHandler is a type definition for a callback function used to handle events.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/template/documents/template-guide.html
+ */
+ interface EventHandler {
+ (this: HTMLElement, e: JQuery.Event, ...args: any[]): void;
+ }
+
+ type InitialObject =
+ & {
+ [K in `p.alert.${string}`]: (NT.Options.Extra & NU.Options.Alert);
+ }
+ & {
+ [K in `p.button.${string}`]: (NT.Options.Extra & NU.Options.Button);
+ }
+ & {
+ [K in `p.datepicker.${string}`]: (NT.Options.Extra & NU.Options.Datepicker);
+ }
+ & {
+ [K in `p.popup.${string}`]: (NT.Options.Extra & NU.Options.Popup);
+ }
+ & {
+ [K in `p.tab.${string}`]: (NT.Options.Extra & NU.Options.Tab);
+ }
+ & {
+ [K in `p.select.${string}`]:
+ | [string, string?, string?, NT.Options.SelectFilter?]
+ | NT.Options.Select;
+ }
+ & {
+ [K in `p.form.${string}`]: (NT.Options.Extra & NU.Options.Form);
+ }
+ & {
+ [K in `p.list.${string}`]: (NT.Options.Extra & NU.Options.List);
+ }
+ & {
+ [K in `p.grid.${string}`]: (NT.Options.Extra & NU.Options.Grid);
+ }
+ & {
+ [K in `p.pagination.${string}`]: (NT.Options.Extra & NU.Options.Pagination);
+ }
+ & {
+ [K in `p.tree.${string}`]: (NT.Options.Extra & NU.Options.Tree);
+ }
+ & {
+ [K in `c.${string}`]: (...args: any[]) => NA.Communicator;
+ }
+ & {
+ [K in `e.${string}`]: EventHandler | {
+ target: JQuery.Selector;
+ handler: EventHandler;
+ };
+ };
+
+ type Object =
+ & NA.Objects.Controller.BaseObject
+ & InitialObject
+ & {
+ [K in `p.alert.${string}`]: NU.Alert;
+ }
+ & {
+ [K in `p.button.${string}`]: NU.Button;
+ }
+ & {
+ [K in `p.datepicker.${string}`]: NU.Datepicker;
+ }
+ & {
+ [K in `p.popup.${string}`]: NU.Popup;
+ }
+ & {
+ [K in `p.tab.${string}`]: NU.Tab;
+ }
+ & {
+ [K in `p.select.${string}`]: NU.Select;
+ }
+ & {
+ [K in `p.form.${string}`]: NU.Form;
+ }
+ & {
+ [K in `p.list.${string}`]: NU.List;
+ }
+ & {
+ [K in `p.grid.${string}`]: NU.Grid;
+ }
+ & {
+ [K in `p.pagination.${string}`]: NU.Pagination;
+ }
+ & {
+ [K in `p.tree.${string}`]: NU.Tree;
+ }
+ & {
+ [K in `e.${string}`]: NJS;
+ };
+ }
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.ui.d.ts b/src/main/resources/static/js/natural_js/@types/natural.ui.d.ts
new file mode 100644
index 0000000..61bc07d
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.ui.d.ts
@@ -0,0 +1,1667 @@
+declare class NU {
+ /**
+ * Create an object instance of Alert with the N() function.
+ * ```
+ * var alert = N(context).alert(opts|msg);
+ * var alert = N(context).alert(opts|msg, vars);
+ * ```
+ *
+ * @param {NU.Options.Alert | string} msg - Specifies an initialization option object for the component or a string representing the contents of the warning message.
+ * @param {string[]} [vars] - This is an array of strings to replace the message variable with.
+ * @returns {NU.Alert} An instance of an Alert object, configured according to the provided options.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040103.html
+ */
+ alert(this: NJS, msg: NU.Options.Alert | string, vars?: string[]): NU.Alert;
+ /**
+ * Creates an object instance of Button with the N() function.
+ * ```
+ * var button = N(context).button(opts);
+ * ```
+ *
+ * @param {NU.Options.Button} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Button} An instance of a Button object, configured according to the provided options.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040203.html
+ */
+ button(this: NJS, opts?: NU.Options.Button): NU.Button;
+ /**
+ * Creates an object instance of Datepicker with the N() function.
+ * ```
+ * var datepicker = N(context).datepicker(opts);
+ * ```
+ *
+ * @param {NU.Options.Datepicker} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Datepicker} An instance of a Datepicker object, configured according to the provided options.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040303.html
+ */
+ datepicker(this: NJS, opts?: NU.Options.Datepicker): NU.Datepicker;
+ /**
+ * Creates an object instance of Popup with the N() function.
+ * ```
+ * var popup = N(context).popup(opts);
+ * ```
+ *
+ * @param {NU.Options.Popup} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Popup} An instance of a Popup object, configured according to the provided options.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040403.html
+ */
+ popup(this: NJS, opts?: NU.Options.Popup): NU.Popup;
+ /**
+ * Creates an object instance of Tab with the N() function.
+ * ```
+ * var tab = N(context).tab(opts);
+ * ```
+ *
+ * @param {NU.Options.Tab} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Tab} An instance of a Tab object, configured according to the provided options.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040503.html
+ */
+ tab(this: NJS, opts?: NU.Options.Tab): NU.Tab;
+ /**
+ * Creates a new Select instance.
+ * ```
+ * var select = N(data).select(opts|context);
+ * ```
+ *
+ * @param {NU.Options.Select | NJS | NC.JSONObject[],
+ opts?: NU.Options.Select | Omit, keyof NJS>,
+ ): NU.Select;
+ /**
+ * Creates a new Form instance.
+ * ```
+ * var form = N(data).form(opts|context);
+ * ```
+ *
+ * @param {NU.Options.Form | NJS | NC.JSONObject[],
+ opts?: NU.Options.Form | Omit, keyof NJS>,
+ ): NU.Form;
+ /**
+ * Creates a new List instance.
+ * ```
+ * var list = N(data).list(opts|context);
+ * ```
+ *
+ * @param {NU.Options.List | NJS | NC.JSONObject[],
+ opts?: NU.Options.List | Omit, keyof NJS>,
+ ): NU.List;
+ /**
+ * Creates a new Grid instance.
+ * ```
+ * var grid = N(data).grid(opts|context);
+ * ```
+ *
+ * @param {NU.Options.Grid | NJS | NC.JSONObject[],
+ opts?: NU.Options.Grid | Omit, keyof NJS>,
+ ): NU.Grid;
+ /**
+ * Creates a new Pagination instance.
+ * ```
+ * var pagination = N(data).pagination(opts|context);
+ * ```
+ *
+ * @param {NU.Options.Pagination | NJS | NC.JSONObject[],
+ opts: NU.Options.Pagination | Omit, keyof NJS>,
+ ): NU.Pagination;
+ /**
+ * Creates a new Tree instance.
+ * ```
+ * var tree = N(data).tree(opts|context);
+ * ```
+ *
+ * @param {NU.Options.Tree | NJS | NC.JSONObject[],
+ opts: NU.Options.Tree | Omit, keyof NJS>,
+ ): NU.Tree;
+
+ static ui: {
+ iteration: {
+ render: (i: any, limit: any, delay: any, lastIdx: any, callType: any) => void;
+ select: (compNm: any) => void;
+ checkAll: (compNm: any) => void;
+ checkSingle: (compNm: any) => void;
+ move: (fromRow: any, toRow: any, compNm: any) => any;
+ copy: (fromRow: any, toRow: any, compNm: any) => any;
+ };
+ draggable: {
+ events: (eventNameSpace: any, startHandler: any, moveHandler: any, endHandler: any) => void;
+ moveX: (x: any, min: any, max: any) => boolean;
+ moveY: (y: any, min: any, max: any) => boolean;
+ };
+ scroll: {
+ paging: (contextWrapEle: any, defSPSize: any, rowEleLength: any, rowTagName: any, bindOpt: any) => void;
+ };
+ utils: {
+ wrapHandler: (opts: any, compNm: any, eventNm: any) => void;
+ isTextInput: (tagName: any, type: any) => boolean;
+ };
+ };
+
+ static alert: {
+ /**
+ * Creates an object instance of Alert.
+ * ```
+ * var alert = new N.alert(context, opts|msg);
+ * var alert = new N.alert(context, opts|msg, vars);
+ * ```
+ *
+ * @param {NJS} obj - Specifies the element on which Alert's modal overlay will be displayed.
+ * @param {NU.Options.Alert | string} msg - Either an initialization option object that defines how the alert should behave, or a string representing the alert message content.
+ * @param {string[]} [vars] - This is an array of strings to replace the message variable with.
+ * @returns {NU.Alert} An instance of an Alert object, configured according to the provided parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040103.html
+ */
+ new(obj: NJS, msg: NU.Options.Alert | string, vars?: string[]): NU.Alert;
+ wrapEle(): void;
+ resetOffSetEle(opts: NU.Options.Alert): void;
+ wrapInputEle(): void;
+ };
+
+ static button: {
+ /**
+ * Creates an object instance of Button.
+ * ```
+ * var button = new N.button(context, opts);
+ * ```
+ *
+ * @param {NJS} obj - Specifies the context element to which the Button will be applied.
+ * @param {NU.Options.Button} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Button} An instance of a Button object, configured according to the provided parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040203.html
+ */
+ new(obj: NJS, opts?: NU.Options.Button): NU.Button;
+ wrapEle(): void;
+ };
+
+ static datepicker: {
+ /**
+ * Creates an object instance of Datepicker.
+ * ```
+ * var datepicker = new N.datepicker(context, opts);
+ * ```
+ *
+ * @param {NJS} obj - Specifies the context element to which the Datepicker will be applied.
+ * @param {NU.Options.Datepicker} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Datepicker} An instance of a Datepicker object, configured according to the provided parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040303.html
+ */
+ new(obj: NJS, opts?: NU.Options.Datepicker): NU.Datepicker;
+ checkMinMaxDate(): boolean;
+ wrapEle(): void;
+ createContents(): any;
+ yearPaging(yearItems: NJS, currYear: number | string, addCnt: number, absolute?: boolean): void;
+ selectItems(
+ opts: NU.Options.Datepicker,
+ value: string,
+ format: string,
+ yearsPanel: NJS,
+ monthsPanel: NJS,
+ daysPanel: NJS,
+ ): void;
+ };
+
+ static popup: {
+ /**
+ * Creates an object instance of Popup.
+ * ```
+ * var popup = new N.popup(context, opts);
+ * ```
+ *
+ * @param {NJS} obj - Specifies the context element to which the Popup will be applied.
+ * @param {NU.Options.Popup} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Popup} An instance of a Popup object, configured according to the provided parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040403.html
+ */
+ new(obj: NJS, opts?: NU.Options.Popup): NU.Popup;
+ wrapEle(): void;
+ loadContent(callback: NU.Callbacks.Popup.LoadContent): void;
+ popOpen(onOpenData: any, cont: NA.Objects.Controller.Object): void;
+ };
+
+ static tab: {
+ /**
+ * Creates an object instance of Tab.
+ * ```
+ * var tab = new N.tab(context, opts);
+ * ```
+ *
+ * @param {NJS} obj - Specifies the context element to which the Tab will be applied.
+ * @param {NU.Options.Tab} [opts] - Specifies the initialization option object for the component.
+ * @returns {NU.Tab} An instance of a Tab object, configured according to the provided parameters.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040503.html
+ */
+ new(obj: NJS, opts?: NU.Options.Tab): NU.Tab;
+ wrapEle(): void;
+ wrapScroll(): void;
+ loadContent(url: string, targetIdx: number, callback: NU.Callbacks.Tab.LoadContent, isFirst: boolean): void;
+ };
+
+ static select: {
+ /**
+ * Creates a new Select instance.
+ * ```
+ * var select = new N.select(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.Select | NJS | NC.JSONObject[],
+ opts?: NU.Options.Select | Omit, keyof NJS>,
+ ): NU.Select;
+ wrapEle(): void;
+ };
+
+ static form: {
+ /**
+ * Creates a new Form instance.
+ * ```
+ * var form = new N.form(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.Form | NJS | NC.JSONObject[],
+ opts?: NU.Options.Form | Omit, keyof NJS>,
+ ): NU.Form;
+ };
+
+ static list: {
+ /**
+ * Creates a new List instance.
+ * ```
+ * var list = new N.list(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.List | NJS | NC.JSONObject[],
+ opts?: NU.Options.List | Omit, keyof NJS>,
+ ): NU.List;
+ createScroll(): void;
+ vResize(contextWrapEle: NJS): void;
+ };
+
+ static grid: {
+ /**
+ * Creates a new Grid instance.
+ * ```
+ * var grid = new N.grid(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.Grid | NJS | NC.JSONObject[],
+ opts?: NU.Options.Grid | Omit, keyof NJS>,
+ ): NU.Grid;
+ tableCells(tbl: any, opt_cellValueGetter: any): any[][];
+ tableMap(): NU.Objects.Grid.TableMap;
+ setTheadCellInfo(): void;
+ removeColgroup(): void;
+ fixColumn(): void;
+ fixHeader(): void;
+ vResize(gridWrap: NJS, contextWrapEle: NJS, tfootWrap: NJS): void;
+ more(): void;
+ resize(): void;
+ sort(): void;
+ dataFilter(): void;
+ rowSpan(
+ i: number,
+ rowEle: NJS,
+ bfRowEle: NJS,
+ rowData: NC.JSONObject,
+ bfRowData: NC.JSONObject,
+ colId: string,
+ ): void;
+ paste(): void;
+ };
+
+ static pagination: {
+ /**
+ * Creates a new Pagination instance.
+ * ```
+ * var pagination = new N.pagination(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.Pagination | NJS | NC.JSONObject[],
+ opts?: NU.Options.Pagination | Omit, keyof NJS>,
+ ): NU.Pagination;
+ wrapEle: NU.Objects.Pagination.LinkEles;
+ changePageSet(
+ linkEles: NU.Objects.Pagination.LinkEles,
+ opts: NU.Options.Pagination,
+ isRemake: boolean,
+ ): NU.Options.CurrPageNavInfo;
+ };
+
+ static tree: {
+ /**
+ * Creates a new Tree instance.
+ * ```
+ * var tree = new N.tree(data, opts|context);
+ * ```
+ *
+ * @param {NJS | NC.JSONObject[]} data - Specifies data to bind to the component.
+ * @param {NU.Options.Tree | NJS | NC.JSONObject[],
+ opts?: NU.Options.Tree | Omit, keyof NJS>,
+ ): NU.Tree;
+ };
+}
+
+declare namespace NU {
+ interface Alert {
+ options: NU.Options.Alert;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040105.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Shows a message dialog box.
+ *
+ * @return {NU.Alert} Returns the `Alert` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040105.html
+ */
+ show(): NU.Alert;
+ /**
+ * Hides the message dialog box.
+ *
+ * @return {NU.Alert} Returns the `Alert` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040105.html
+ */
+ hide(): NU.Alert;
+ /**
+ * Removes all elements related to Alert.
+ *
+ * @return {NU.Alert} Returns the `Alert` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040105.html
+ */
+ remove(): NU.Alert;
+ }
+
+ interface Button {
+ options: NU.Options.Button;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040206.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Disable the button.
+ *
+ * @return {NU.Button} Returns the `Button` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040206.html
+ */
+ disable(): NU.Button;
+ /**
+ * Enable the button.
+ *
+ * @return {NU.Button} Returns the `Button` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040206.html
+ */
+ enable(): NU.Button;
+ }
+
+ interface Datepicker {
+ options: NU.Options.Datepicker;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040306.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Shows the Datepicker.
+ *
+ * @return {NU.Datepicker} Returns the `Datepicker` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040306.html
+ */
+ show(): NU.Datepicker;
+ /**
+ * Hides the Datepicker.
+ *
+ * @return {NU.Datepicker} Returns the `Datepicker` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040306.html
+ */
+ hide(): NU.Datepicker;
+ }
+
+ interface Popup {
+ options: NU.Options.Popup;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040405.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Opens the Popup.
+ *
+ * @param {any} [onOpenData] - Optional data to be processed or used when the popup is opened.
+ * > Pass onOpenData as the first argument to the onOpen function specified by the onOpen event option.
+ * @return {NU.Popup} Returns the `Popup` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040405.html
+ */
+ open(onOpenData?: any): NU.Popup;
+ /**
+ * Close the Popup.
+ *
+ * @param {any} [onCloseData] - Optional data to be processed or used when the popup is closed.
+ * > Pass onCloseData as the first argument to the onClose function specified by the onClose event option.
+ * @return {NU.Popup} Returns the `Popup` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040405.html
+ */
+ close(onCloseData?: any): NU.Popup;
+ /**
+ * Removes all elements related to Popup.
+ *
+ * @return {NU.Popup} Returns the `Popup` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040405.html
+ */
+ remove(): NU.Popup;
+ }
+
+ interface Tab {
+ options: NU.Options.Tab;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Opens the specified tab.
+ *
+ * @param {number} idx - The index of the tab to open.
+ * @param {any} [onOpenData] - Optional data to be processed or used when the tab is opened.
+ * > Pass onOpenData as the first argument to the onOpen function specified by the onOpen event option.
+ * @param {boolean} [isFirst] - This is an option used inside a component that is set to true when a tab is instantiated and the default active tab is automatically selected.
+ * @return {NU.Tab} - Returns the `Tab` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ open(idx: number, onOpenData?: any, isFirst?: boolean): NU.Tab;
+ /**
+ * Opens the specified tab.
+ *
+ * @param {number} [idx] - The index of the tab to open. If no arguments are specified, a status information object is returned.
+ * @param {any} [onOpenData] - Optional data to be processed or used when the tab is opened.
+ * > Pass onOpenData as the first argument to the onOpen function specified by the onOpen event option.
+ * @param {boolean} [isFirst] - This is an option used inside a component that is set to true when a tab is instantiated and the default active tab is automatically selected.
+ * @return {Object} If all arguments are not entered, the following tab status information is returned in object type.
+ * @return {number} return.index - Index of the activated tab.
+ * @return {NJS} return.tab - Activated tab navigation element.
+ * @return {NJS} return.content - Activated tab content element.
+ * @return {NA.Objects.Controller.Object} return.cont - Controller object of the activated tab content.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ open(idx?: number, onOpenData?: any, isFirst?: boolean): {
+ index: number;
+ tab: NJS;
+ content: NJS;
+ cont: NA.Objects.Controller.Object;
+ };
+ /**
+ * Disables the specified tab.
+ *
+ * @param {number} idx - The index of the tab to disable.
+ * @return {NU.Tab} Returns the `Tab` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ disable(idx: number): NU.Tab;
+ /**
+ * Enables the specified tab.
+ *
+ * @param {number} idx - The index of the tab to be enabled.
+ * @return {NU.Tab} Returns the `Tab` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ enable(idx: number): NU.Tab;
+ /**
+ * Returns the Controller object of the tab content.
+ * > If the tab content is created internally or the preload option is false, undefined is returned because there is no Controller object.
+ *
+ * @param {number} [idx] - Enter the tab index where the controller object you want to look up is located. If no index is provided, the method returns the controller object that is active.
+ * @return {NA.Objects.Controller.Object} The controller object corresponding to the specified index.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040506.html
+ */
+ cont(idx?: number): NA.Objects.Controller.Object;
+ }
+
+ interface Select {
+ options: NU.Options.Select;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - true: Extracts only the currently selected row data and returns it as `JSONObject[]` type.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ data(selFlag: true): NC.JSONObject[];
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {false} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - true: Extracts only the currently selected row data and returns it as `JSONObject[]` type.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * @return {NJS} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Binds data to the element specified by the context option.
+ * > If the context element is a checkbox and is checked, the elements created when data is bound are also created in a checked state.
+ *
+ * > When data is bound to a radio or checkbox input element, the element set as context has an id attribute and a name attribute, and only the name attribute is added to the additionally created option element.
+ * When binding an event to a created checkbox or radio, if you select an element with the id selector, the event is applied only to the first option element, so select the element with the name attribute.
+ * ```
+ * $("input[name='name']").on("click", function(e) { ... });
+ * ```
+ *
+ * @param {NJS} [data] - Specifies the data to bind.
+ * @return {NU.Select} Returns the `Select` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ bind(data?: NJS | NC.JSONObject[]): NU.Select;
+ /**
+ * Returns the index of the selected option.
+ *
+ * @return {number} Index of selected option
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ index(): number;
+ /**
+ * Select the option corresponding to the specified index.
+ *
+ * @param {number} idx - Index of the option to select
+ * @return {NU.Select} Returns the `Select` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ index(idx: number): NU.Select;
+ /**
+ * Returns the value of the selected option.
+ *
+ * @return {NC.Primitive | NC.Primitive[]} Selected option value.
+ */
+ val(): NC.Primitive | NC.Primitive[];
+ /**
+ * Select the option corresponding to the specified value.
+ *
+ * @param {NC.Primitive | NC.Primitive[]} [val] - Option value to select.
+ * @return {NU.Select} Returns the `Select` instance for chaining.
+ */
+ val(val?: NC.Primitive | NC.Primitive[]): NU.Select;
+ /**
+ * Removes option elements and row data objects equal to the value specified by the val argument..
+ *
+ * @param {NC.Primitive} val -
+ * @return {NU.Select} Returns the `Select` instance for chaining.
+ */
+ remove(val: NC.Primitive): NU.Select;
+ /**
+ * Reset selection.
+ *
+ * @param {boolean} [selFlag] - For select elements, setting it to true will select nothing and setting it to false will select the default (first) option element.
+ * @return {NU.Select} - Returns the `Select` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040605.html
+ */
+ reset(selFlag?: boolean): NU.Select;
+ }
+
+ interface Form {
+ options: NU.Options.Form;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - true: Extracts only the currently selected row data and returns it as `JSONObject[]` type.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * @param {...string} cols - If you specify the property name of the data as an argument from the second argument to the nth argument of the data method, an object from which only the specified property value is extracted is returned.
+ * ```
+ * var formInst = N([]).form(".context")
+ * .bind(0, [{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]);
+ * formInst.data(true, "col01", "col02", "col03");
+ * // [{ col01: "", col02: "", col03: "" }]
+ * ```
+ * > This only works if you specify the first argument as true.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ data(selFlag: true, ...cols: string[]): NC.JSONObject[];
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - true: Extracts only the currently selected row data and returns it as `JSONObject[]` type.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the index of the data bound to the Form from the bound data array.
+ *
+ * @param {string} [before] - If "before" is specified, the index of the data bound just before is returned.
+ * @return {number} Row index.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ row(before?: "before"): number;
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ bindEvents: {
+ validate(ele: NJS, opts: NU.Options.Form, eleType: string, isTextInput: boolean): void;
+ dataSync(ele: NJS, opts: NU.Options.Form, vals: NC.JSONObject, eleType: string): void;
+ enterKey(ele: NJS, opts: NU.Options.Form): void;
+ format(ele: NJS, opts: NU.Options.Form, eleType: string, key: string): void;
+ };
+ /**
+ * Binds data to elements that have an id attribute value within the element specified by the context option.
+ *
+ * > If you change only the data and bind it again, N.form may not work properly.
+ * When rebinding to a context element that has data bound to it, you must first run the unbind method and then run the bind method.
+ *
+ * @param {number} row - Specifies the row index of the data array to bind.
+ * @param {NJS} [data] - Specifies the data to bind.
+ * @param {...string} [cols] - If you specify the property name of the data from the third to the nth argument of the bind method, only the elements whose property name and id attribute value match will be bound to the data.
+ * ```
+ * // Data to bind
+ * var data = [{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]
+ * // Binds only to elements that have the id attribute values “col01”, “col02”, and “col03”.
+ * formInstance.bind(0, data, "col01", "col02", "col03");
+ * ```
+ * ```
+ * // After directly modifying the bound data, bind only to elements that have the id attribute values “col01”, “col02”, and “col03”.
+ * var data = formInstance.data()[formInstance.row()]
+ * data.col01 = "val";
+ * data.col02 = "123";
+ * data.col03 = "temp";
+ * formInstance.bind(0, data, "col01", "col02", "col03");
+ * ```
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ bind(row: number, data?: NJS | NC.JSONObject[], ...cols: string[]): NU.Form;
+ /**
+ * Add new row data.
+ *
+ * When creating row data, a data object is created with the id attribute name and value of the input elements in the context element.
+ *
+ * @param {number | NC.JSONObject} [data] - If you specify a data object, the generated data and the specified data are merged and bound.
+ * > If the data argument is of type number, it is specified as the row(args[1]) argument.
+ * @param {number} [row] - If you specify the row index where new data will be added as the row argument, the row data will be added immediately before the specified row index.
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ add(data?: number | NC.JSONObject, row?: number): NU.Form;
+ /**
+ * Removes the data object bound to the Form from the data array.
+ * > If rowStatus is `insert`, remove the row data, otherwise change rowStatus to "delete".
+ *
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ remove(): NU.Form;
+ /**
+ * Reverts to the state where the initial data was bound or the initial data state created when adding.
+ *
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ revert(): NU.Form;
+ /**
+ * Returns validation results for all added/modified data.
+ *
+ * @return {boolean} Returns true if validation is successful, false if validation fails, and displays a failure message in a tooltip next to the corresponding input element.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040706.html
+ */
+ validate(): boolean;
+ /**
+ * Retrieves the property value of the data object bound to the component.
+ *
+ * @param {string} key - Property name of data object.
+ * @return {NC.Primitive | NC.Primitive[]} The value specified by the key argument.
+ */
+ val(key: string): NC.Primitive | NC.Primitive[];
+ /**
+ * Updates or adds property values of the data object bound to the component.
+ *
+ * @param {string} key - Property name of data object
+ * @param {NC.Primitive | NC.Primitive[]} [val] - Property value of data object
+ * @param {boolean} [notify] - If set to false, data change notification will not be displayed to components referencing the same data.
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ */
+ val(key: string, val: NC.Primitive | NC.Primitive[], notify?: boolean): NU.Form;
+ /**
+ * Processes real-time data synchronization logic for two-way data binding between data components.
+ *
+ * @param {number} row - The index of the row to be updated.
+ * @param {string} [key] - This is the column name of the row data to be updated.
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ */
+ update(row: number, key?: string): NU.Form;
+ }
+
+ interface List {
+ options: NU.Options.List;
+ /**
+ * The default row(li) element of a list. Create row elements by duplicating this element.
+ */
+ tempRowEle: NJS;
+ /**
+ * This is an element specified by the context option of the list component. An instance of the original context element is assigned to the processed element.
+ */
+ contextEle: NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - modified: Returns inserted, updated and deleted data as `JSONObject[]` type.
+ * - selected: When the select option or multiselect option is set, the selected data is returned as `JSONObject[]` type.
+ * - checked: When the checkAll option, checkAllTarget option, or checkOnlyTarget option is set, the checked data is returned as `JSONObject[]` type.
+ * - insert: Returns the inserted data as `JSONObject[]` type.
+ * - update: Returns the inserted data as `JSONObject[]` type.
+ * - delete: Returns the inserted data as `JSONObject[]` type.
+ * @param {...string} cols - If you specify the property name of the data as an argument from the second argument to the nth argument of the data method, an object from which only the specified property value is extracted is returned.
+ * ```
+ * var listInst = N([]).list(".context")
+ * .bind([{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]);
+ * listInst.data("modified", "col01", "col02", "col03");
+ * // [{ col01: "", col02: "", col03: "" }]
+ * ```
+ * > This only works if the first argument is "modified", "selected", "checked", "insert", "update", or "delete".
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ data(
+ selFlag: "modified" | "selected" | "checked" | "insert" | "update" | "delete",
+ ...cols: string[]
+ ): NC.JSONObject[];
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - modified: Returns inserted, updated and deleted data as `JSONObject[]` type.
+ * - selected: When the select option or multiselect option is set, the selected data is returned as `JSONObject[]` type.
+ * - checked: When the checkAll option, checkAllTarget option, or checkOnlyTarget option is set, the checked data is returned as `JSONObject[]` type.
+ * - insert: Returns the inserted data as `JSONObject[]` type.
+ * - update: Returns the inserted data as `JSONObject[]` type.
+ * - delete: Returns the inserted data as `JSONObject[]` type.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Returns the row element (li) of the element specified by the context option.
+ *
+ * If you modify the returned element and then run the bind function, rows will be created with the modified element.
+ *
+ * The contextBodyTemplate function allows you to modify row elements of N.list even after N.list has been initialized.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The default tbody element of a table element or the element selected in the default tbody element of a table element is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ contextBodyTemplate(sel?: JQuery.Selector): NJS;
+ /**
+ * Returns the index of the selected row.
+ * > To use the select method, the `select` or `multiselect` option must be set to true.
+ *
+ * @return {NJS} Index of selected row
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ select(): number[];
+ /**
+ * Select a row.
+ * > To use the select method, the `select` or `multiselect` option must be set to true.
+ *
+ * @param {number | number[]} row
+ * - number: Specifies the row index to select.
+ * - number[]: When selecting multiple items at once, specify the row index as an array.
+ * @param {boolean} [isAppend] - If you do not enter it or enter false, all selected rows will be deselected and then selected again. If you enter true, the existing selected rows will be maintained and selected.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ select(row: number | number[], isAppend?: boolean): NU.List;
+ /**
+ * Returns the index of the row where the checkbox elements specified by the `checkAllTarget` and `checkSingleTarget` options are checked.
+ *
+ * @return {NJS} Index of checked row
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ check(): NJS;
+ /**
+ * Checks the checkbox elements specified with the checkAllTarget` and `checkSingleTarget` options.
+ *
+ * @param {number | number[]} row
+ * - number: Specifies the row index to check.
+ * - number[]: When checking multiple items at once, specify the row index as an array.
+ * @param {boolean} [isAppend] - If you do not enter it or enter false, all checked rows will be dechecked and then checked again. If you enter true, the existing checked rows will be maintained and checked.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ check(row: number | number[], isAppend?: boolean): NU.List;
+ /**
+ * Binds data to elements with an id attribute value within the element specified by the context option and creates row elements equal to the length of data.
+ *
+ * @param {NJS} [data] - Specifies the data to bind.
+ * @param {"append" | "list.bind" | "list.update"} [callType]
+ * - append: Merges previously bound data and newly bound data and adds new row elements to previously created row elements.
+ * - list.bind: This is an option for processing status inside a component. Set opts.scrollPaging.idx to 0.
+ * - list.update: This is an option for processing status inside a component. This is a flag to branch the logic processed when called from the logic for two-way data binding(update function).
+ * > When the "append" argument value is set, the scrollPaging.size option value is automatically set to 0, disabling the scroll paging feature.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ bind(data?: NJS | NC.JSONObject[], callType?: "append" | "list.bind" | "list.update"): NU.List;
+ /**
+ * Add new row elements and data.
+ *
+ * When creating row data, a data object is created with the id attribute name and value of the input elements in the context element.
+ *
+ * @param {number | NC.JSONObject} [data] - If you specify a data object, the generated data and the specified data are merged and bound.
+ * > If the data argument is of type number, it is specified as the row(args[1]) argument.
+ * @param {number} [row] - If you specify the row index where new data will be added as the row argument, the row data will be added immediately before the specified row index.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ add(data?: number | NC.JSONObject, row?: number): NU.List;
+ /**
+ * Removes the data object bound to the Form from the data array.
+ * > If rowStatus is `insert`, remove the row data, otherwise change rowStatus to "delete".
+ *
+ * @param {number} [row] - Specifies the index of the row to remove.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ remove(row: number): NU.List;
+ /**
+ * Reverts to the state where the initial data was bound or the initial data state created when adding.
+ *
+ * @param {number} [row] - Specifies the index of the row to remove. If not specified, reverts the entire row data.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ revert(row?: number): NU.List;
+ /**
+ * Returns validation results for all added/modified data.
+ *
+ * @param {number} [row] - Specifies the index of the row to validation. If not specified, validates the entire row data.
+ * @return {boolean} Returns true if validation is successful, false if validation fails, and displays a failure message in a tooltip next to the corresponding input element.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ validate(row?: number): boolean;
+ /**
+ * Retrieves the property value of the data object bound to the component.
+ *
+ * @param {number} row - The row index from which the value is to be retrieved.
+ * @param {string} key - Property name of data object.
+ * @return {NC.Primitive | NC.Primitive[]} The value specified by the key argument.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ val(row: number, key: string): NC.Primitive | NC.Primitive[];
+ /**
+ * Updates or adds property values of the data object bound to the component.
+ *
+ * @param {number} row - The index of the row where the value is to be modified.
+ * @param {string} key - Property name of data object
+ * @param {NC.Primitive | NC.Primitive[]} [val] - Property value of data object
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ val(row: number, key: string, val: NC.Primitive | NC.Primitive[]): NU.List;
+ /**
+ * Move element and row data from one location to another within a list.
+ *
+ * @param {number} fromRow - The index of the item to move from.
+ * @param {number} toRow - The index of the new position for the item.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ move(fromRow: number, toRow: number): NU.List;
+ /**
+ * Copy element and row data from one location to another within a list.
+ *
+ * @param {number} fromRow - The index of the item to copy from.
+ * @param {number} toRow - The index of the new position for the item.
+ * @return {NU.List} Returns the `List` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ copy(fromRow: number, toRow: number): NU.List;
+ /**
+ * Processes real-time data synchronization logic for two-way data binding between data components.
+ *
+ * @param {number} row - The index of the row to be updated.
+ * @param {string} [key] - This is the column name of the row data to be updated.
+ * @return {NU.Form} Returns the `Form` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0408.html&tab=html/naturaljs/refr/refr040806.html
+ */
+ update(row: number, key?: string): NU.List;
+ }
+
+ interface Grid {
+ options: NU.Options.Grid;
+ /**
+ * The default row(tbody) element of a grid. Create row elements by duplicating this element.
+ */
+ tempRowEle: NJS;
+ /**
+ * It is a structured collection of elements that make up a table.
+ */
+ tableMap: NU.Objects.Grid.TableMap;
+ /**
+ * These are thead elements of the table.
+ */
+ thead: NJS;
+ /**
+ * This is an element specified by the context option of the list component. An instance of the original context element is assigned to the processed element.
+ */
+ contextEle: NJS;
+ /**
+ * A collection of id values for elements for which the rowSpan property is defined.
+ */
+ rowSpanIds: NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - modified: Returns inserted, updated and deleted data as `JSONObject[]` type.
+ * - selected: When the select option or multiselect option is set, the selected data is returned as `JSONObject[]` type.
+ * - checked: When the checkAll option, checkAllTarget option, or checkOnlyTarget option is set, the checked data is returned as `JSONObject[]` type.
+ * - insert: Returns the inserted data as `JSONObject[]` type.
+ * - update: Returns the inserted data as `JSONObject[]` type.
+ * - delete: Returns the inserted data as `JSONObject[]` type.
+ * @param {...string} cols - If you specify the property name of the data as an argument from the second argument to the nth argument of the data method, an object from which only the specified property value is extracted is returned.
+ * ```
+ * var gridInst = N([]).grid(".context")
+ * .bind([{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]);
+ * gridInst.data("modified", "col01", "col02", "col03");
+ * // [{ col01: "", col02: "", col03: "" }]
+ * ```
+ * > This only works if the first argument is "modified", "selected", "checked", "insert", "update", or "delete".
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ data(
+ selFlag: "modified" | "selected" | "checked" | "insert" | "update" | "delete",
+ ...cols: string[]
+ ): NC.JSONObject[];
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - modified: Returns inserted, updated and deleted data as `JSONObject[]` type.
+ * - selected: When the select option or multiselect option is set, the selected data is returned as `JSONObject[]` type.
+ * - checked: When the checkAll option, checkAllTarget option, or checkOnlyTarget option is set, the checked data is returned as `JSONObject[]` type.
+ * - insert: Returns the inserted data as `JSONObject[]` type.
+ * - update: Returns the inserted data as `JSONObject[]` type.
+ * - delete: Returns the inserted data as `JSONObject[]` type.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Returns the thead element of the table.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The table's thead element or the element selected in the table's thead is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ contextHead(sel?: JQuery.Selector): NJS;
+ /**
+ * Returns the row element (tbody) of the element specified by the context option.
+ *
+ * If you modify the returned element and then run the bind function, rows will be created with the modified element.
+ *
+ * The contextBodyTemplate function allows you to modify row elements in N.grid even after N.grid has been initialized.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The default tbody element of a table element or the element selected in the default tbody element of a table element is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ contextBodyTemplate(sel?: JQuery.Selector): NJS;
+ /**
+ * Returns the index of the selected row.
+ * > To use the select method, the `select` or `multiselect` option must be set to true.
+ *
+ * @return {NJS} Index of selected row
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ select(): number[];
+ /**
+ * Select a row.
+ * > To use the select method, the `select` or `multiselect` option must be set to true.
+ *
+ * @param {number | number[]} row
+ * - number: Specifies the row index to select.
+ * - number[]: When selecting multiple items at once, specify the row index as an array.
+ * @param {boolean} [isAppend] - If you do not enter it or enter false, all selected rows will be deselected and then selected again. If you enter true, the existing selected rows will be maintained and selected.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ select(row: number | number[], isAppend?: boolean): NU.Grid;
+ /**
+ * Returns the index of the row where the checkbox elements specified by the `checkAllTarget` and `checkSingleTarget` options are checked.
+ *
+ * @return {NJS} Index of checked row
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ check(): NJS;
+ /**
+ * Checks the checkbox elements specified with the checkAllTarget` and `checkSingleTarget` options.
+ *
+ * @param {number | number[]} row
+ * - number: Specifies the row index to check.
+ * - number[]: When checking multiple items at once, specify the row index as an array.
+ * @param {boolean} [isAppend] - If you do not enter it or enter false, all checked rows will be dechecked and then checked again. If you enter true, the existing checked rows will be maintained and checked.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ check(row: number | number[], isAppend?: boolean): NU.Grid;
+ /**
+ * Binds data to elements with an id attribute value within the element specified by the context option and creates row elements equal to the length of data.
+ *
+ * @param {NJS} [data] - Specifies the data to bind.
+ * @param {"append" | "grid.bind" | "grid.update"} [callType]
+ * - append: Merges previously bound data and newly bound data and adds new row elements to previously created row elements.
+ * - grid.bind: This is an option for processing status inside a component. Set opts.scrollPaging.idx to 0.
+ * - grid.dataFilter: This is an option for processing status inside a component. This is a flag to branch the logic processed when called from the logic for the grid data filter function.
+ * - grid.sort: This is an option for processing status inside a component. This is a flag to branch the logic processed when called from the logic for the grid data sort function.
+ * - grid.update: This is an option for processing status inside a component. This is a flag to branch the logic processed when called from the logic for two-way data binding(update function).
+ * > When the "append" argument value is set, the scrollPaging.size option value is automatically set to 0, disabling the scroll paging feature.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ bind(
+ data?: NJS | NC.JSONObject[],
+ callType?: "append" | "grid.bind" | "grid.dataFilter" | "grid.sort" | "grid.update",
+ ): NU.Grid;
+ /**
+ * Add new row elements and data.
+ *
+ * When creating row data, a data object is created with the id attribute name and value of the input elements in the context element.
+ *
+ * @param {number | NC.JSONObject} [data] - If you specify a data object, the generated data and the specified data are merged and bound.
+ * > If the data argument is of type number, it is specified as the row(args[1]) argument.
+ * @param {number} [row] - If you specify the row index where new data will be added as the row argument, the row data will be added immediately before the specified row index.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ add(data?: number | NC.JSONObject, row?: number): NU.Grid;
+ /**
+ * Removes the data object bound to the Form from the data array.
+ * > If rowStatus is `insert`, remove the row data, otherwise change rowStatus to "delete".
+ *
+ * @param {number} [row] - Specifies the index of the row to remove.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ remove(row: number): NU.Grid;
+ /**
+ * Reverts to the state where the initial data was bound or the initial data state created when adding.
+ *
+ * @param {number} [row] - Specifies the index of the row to remove. If not specified, reverts the entire row data.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ revert(row?: number): NU.Grid;
+ /**
+ * Returns validation results for all added/modified data.
+ *
+ * @param {number} [row] - Specifies the index of the row to validation. If not specified, validates the entire row data.
+ * @return {boolean} Returns true if validation is successful, false if validation fails, and displays a failure message in a tooltip next to the corresponding input element.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ validate(row?: number): boolean;
+ /**
+ * Retrieves the property value of the data object bound to the component.
+ *
+ * @param {number} row - The row index from which the value is to be retrieved.
+ * @param {string} key - Property name of data object.
+ * @return {NC.Primitive | NC.Primitive[]} The value specified by the key argument.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ val(row: number, key: string): NC.Primitive | NC.Primitive[];
+ /**
+ * Updates or adds property values of the data object bound to the component.
+ *
+ * @param {number} row - The index of the row where the value is to be modified.
+ * @param {string} key - Property name of data object
+ * @param {NC.Primitive | NC.Primitive[]} [val] - Property value of data object
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ val(row: number, key: string, val: NC.Primitive | NC.Primitive[]): NU.Grid;
+ /**
+ * Move element and row data from one location to another within a list.
+ *
+ * @param {number} fromRow - The index of the item to move from.
+ * @param {number} toRow - The index of the new position for the item.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ move(fromRow: number, toRow: number): NU.Grid;
+ /**
+ * Copy element and row data from one location to another within a list.
+ *
+ * @param {number} fromRow - The index of the item to copy from.
+ * @param {number} toRow - The index of the new position for the item.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ copy(fromRow: number, toRow: number): NU.Grid;
+ /**
+ * Shows hidden columns again.
+ *
+ * @param {number} colIdxs - The indices of the columns to be shown.
+ * @return {NU.Grid} - Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ show(colIdxs: number): NU.Grid;
+ /**
+ * Hides the selected column.
+ *
+ * @param {number} colIdxs - The index of the column to be hidden.
+ * @return {NU.Grid} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ hide(colIdxs: number): NU.Grid;
+ /**
+ * Processes real-time data synchronization logic for two-way data binding between data components.
+ *
+ * @param {number} row - The index of the row to be updated.
+ * @param {string} [key] - This is the column name of the row data to be updated.
+ * @return {NU.Form} Returns the `Grid` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0409.html&tab=html/naturaljs/refr/refr040906.html
+ */
+ update(row: number, key?: string): NU.Grid;
+ }
+
+ interface Pagination {
+ options: NU.Options.Pagination;
+ linkEles: NU.Objects.Pagination.LinkEles;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041006.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041006.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Creates a Pagination element by binding data to the element specified with the context option.
+ *
+ * @param {NJS | number} [data] - Specify data to bind or set totalCount.
+ * If the argument type is number, it is set to totalCount, and if the argument type is array type, it is set to data.
+ * @param {number} [totalCount] - Enter the total number of rows of data for pagination.
+ * @return {NU.Pagination} Returns the `Pagination` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ bind(data?: NJS | NC.JSONObject[] | number, totalCount?: number): NU.Pagination;
+ /**
+ * Gets the Total count value.
+ *
+ * @return {number} Total count of data to be displayed by pagination.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ totalCount(): number;
+ /**
+ * Specifies the Total count value.
+ * > Since only the option value of N.pagination is changed, the bind method must be executed after executing this function for the changed value to be displayed in pagination.
+ *
+ * @param {number} totalCount - Total count of data to be displayed by pagination.
+ * @return {NU.Pagination} Returns the `Pagination` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ totalCount(totalCount: number): NU.Pagination;
+ /**
+ * Gets the currently selected page number.
+ *
+ * @return {number} Tpage number.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ pageNo(): number;
+ /**
+ * Sets the specified page number.
+ * > Since only the option value of N.pagination is changed, the bind method must be executed after executing this function for the changed value to be displayed in pagination.
+ *
+ * @param {number} pageNo - page number.
+ * @return {NU.Pagination} Returns the `Pagination` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ pageNo(pageNo: number): NU.Pagination;
+ /**
+ * Gets the count per page value.
+ *
+ * @return {number} Count per page.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ countPerPage(): number;
+ /**
+ * Sets the specified count per page value.
+ * > Since only the option value of N.pagination is changed, the bind method must be executed after executing this function for the changed value to be displayed in pagination.
+ *
+ * @param {number} countPerPage - Count per page.
+ * @return {NU.Pagination} Returns the `Pagination` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ countPerPage(countPerPage: number): NU.Pagination;
+ /**
+ * Gets the value of the count per page set.
+ *
+ * @return {number} Count per page set.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ countPerPageSet(): number;
+ /**
+ * Sets the specified count per page set.
+ * > Since only the option value of N.pagination is changed, the bind method must be executed after executing this function for the changed value to be displayed in pagination.
+ *
+ * @param {number} countPerPageSet - count per page set.
+ * @return {NU.Pagination} Returns the `Pagination` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0410.html&tab=html/naturaljs/refr/refr041005.html
+ */
+ countPerPageSet(countPerPageSet: number): NU.Pagination;
+ /**
+ * Returns a paging information object.
+ *
+ * @return {NU.Options.CurrPageNavInfo} currPageNavInfo object information.
+ * - pageNo: Current page number.
+ * - countPerPage: Row count per page.
+ * - countPerPageSet: Page count per page set.
+ * - currSelPageSet: Current page set number.
+ * - pageCount: Total page count.
+ * - pageSetCount: Total page set count.
+ * - totalCount: Total row count.
+ * - startPage: First page number in the current page set.
+ * - startRowIndex: First row index on the selected page.
+ * - startRowNum: First row number of the selected page.
+ * - endPage: Last page number in the current page set.
+ * - endRowIndex: Last row index on the selected page.
+ * - endRowNum: Last row number of the selected page.
+ */
+ currPageNavInfo(): NU.Options.CurrPageNavInfo;
+ }
+
+ interface Tree {
+ options: NU.Options.Tree;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - selected: Returns the data of the selected node as `JSONObject[]` type.
+ * - checked: Returns the data of the checked node as `JSONObject[]` type.
+ * - checkedInLastNode: Returns the data of the last node of all checked elements in `JSONObject[]` type.
+ * @param {...string} cols - If you specify the property name of the data as an argument from the second argument to the nth argument of the data method, an object from which only the specified property value is extracted is returned.
+ * ```
+ * var treeInst = N([]).tree(".context")
+ * .bind([{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]);
+ * treeInst.data("checked", "col01", "col02", "col03");
+ * // [{ col01: "", col02: "", col03: "" }]
+ * ```
+ * > This only works if the first argument is "selected", "selected", "checked", or "checkedInLastNode".
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041106.html
+ */
+ data(selFlag: "selected" | "checked" | "checkedInLastNode", ...cols: string[]): NC.JSONObject[];
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @param {true} selFlag - Depending on the argument values, it returns the following data:
+ * - undefined(If the selFlag option is not specified): Returns data of type `JSONObject[]`.
+ * - false: Returns data of the original type of type `NJS` bound to the component.
+ * > When binding data retrieved with the data method to another data-related component, you must set it to "false" to bind the original type of data to enable two-way data binding.
+ * - selected: Returns the data of the selected node as `JSONObject[]` type.
+ * - checked: Returns the data of the checked node as `JSONObject[]` type.
+ * - checkedInLastNode: Returns the data of the last node of all checked elements in `JSONObject[]` type.
+ * ```
+ * var treeInst = N([]).tree(".context")
+ * .bind([{ col01: "", col02: "", col03: "", col04: "", col05: "", col06: "" }]);
+ * treeInst.data("checked", "col01", "col02", "col03");
+ * // [{ col01: "", col02: "", col03: "" }]
+ * ```
+ * > This only works if the first argument is "selected", "checked", or "checkedInLastNode".
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041106.html
+ */
+ data(selFlag: false): NJS;
+ /**
+ * Returns the latest data bound to the component.
+ *
+ * @return {JSONObject[]} The data currently bound to the component is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041106.html
+ */
+ data(): NC.JSONObject[];
+ /**
+ * Returns the context element.
+ *
+ * @param {JQuery.Selector} [sel] - An optional jQuery selector to refine the context.
+ * @return {NJS} The context element or the element selected in the context is returned.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ context(sel?: JQuery.Selector): NJS;
+ /**
+ * Creates a Tree within the element specified by the context option.
+ *
+ * @param {NJS} [data] - Specifies the data to bind.
+ * @return {NU.Tree} Returns the `Tree` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ bind(data?: NJS | NC.JSONObject[]): NU.Tree;
+ /**
+ * Returns the selected node value.
+ *
+ * @return {NC.Primitive} Selected node value.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ select(): NC.Primitive;
+ /**
+ * Select a node.
+ *
+ * @param {NC.Primitive} [val] - Specifies the node value to select.
+ * @return {NU.Tree} Returns the `Tree` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ select(val?: NC.Primitive): NU.Tree;
+ /**
+ * Expand all tree nodes.
+ *
+ * @return {NU.Tree} Returns the `Tree` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ expand(): NU.Tree;
+ /**
+ * Collapses all tree nodes.
+ *
+ * @param {boolean} isFirstNodeOpen - If set to true, all nodes except the first will be collapsed.
+ * @return {NU.Tree} Returns the `Tree` instance for chaining.
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0411.html&tab=html/naturaljs/refr/refr041105.html
+ */
+ collapse(isFirstNodeOpen?: boolean): NU.Tree;
+ }
+}
diff --git a/src/main/resources/static/js/natural_js/@types/natural.ui.misc.d.ts b/src/main/resources/static/js/natural_js/@types/natural.ui.misc.d.ts
new file mode 100644
index 0000000..9438abb
--- /dev/null
+++ b/src/main/resources/static/js/natural_js/@types/natural.ui.misc.d.ts
@@ -0,0 +1,3563 @@
+declare namespace NU {
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum ButtonSize {
+ NONE = "none",
+ SMALLER = "smaller",
+ SMALL = "small",
+ MEDIUM = "medium",
+ LARGE = "large",
+ BIG = "big",
+ }
+
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum ButtonColor {
+ NONE = "none",
+ PRIMARY = "primary",
+ PRIMARY_CONTAINER = "primary_container",
+ SECONDARY = "secondary",
+ SECONDARY_CONTAINER = "secondary_container",
+ TERTIARY = "tertiary",
+ TERTIARY_CONTAINER = "tertiary_container",
+ }
+
+ /* eslint-disable-next-line @definitelytyped/no-const-enum */
+ const enum ButtonType {
+ NONE = "none",
+ FILLED = "filled",
+ OUTLINED = "outlined",
+ ELEVATED = "elevated",
+ }
+
+ namespace Options {
+ interface Alert {
+ /**
+ * Specifies the area where the message dialog for Alert will be displayed.
+ *
+ * When the modal option is set to true, Alert's overlay element covers as much as the element specified by context.
+ * > If you specify a window object, it will cover the entire screen, and if you enter a jquery selector or jQuery object, it will cover only the specified element.
+ *
+ * When you specify an input element(select, input, textarea, etc.), a message is displayed in a tooltip next to the input element.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ context?: Window | NJS;
+ /**
+ * Message content.
+ *
+ * > You can specify a message string, jQuery object, HTML string, or HTML element.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ msg: string | NJS;
+ /**
+ * Replaces the variable in the message with the entered value.
+ * > Variables such as `{index}` declared in the message are replaced with the value corresponding to the index of the array set with the vars option.
+ * ```
+ * N(window).alert({
+ * msg: "{0} {1}-JS.",
+ * vars: ["Hello", "Natural"]
+ * }).show();
+ *
+ * // Result message: "Hello Natural-JS"
+ * ```
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ vars?: string[];
+ /**
+ * If set to true, the HTML in the message will be applied.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ html?: boolean;
+ /**
+ * Top position(px) of the message dialog.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ top?: number;
+ /**
+ * Left position(px) of the message dialog.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ left?: number;
+ /**
+ * Width of the message dialog.
+ * - number: When set to the number type, the entered number(px) is set as the width of the element.
+ * - NU.EventHandlers.Alert.Width: When set to a function type, msgContext (element that covers the screen when the modal option is true) and msgContents (message content element) are passed as arguments, and the width of the element is set with the returned value.
+ * ```
+ * ...
+ * // Fill the width of the dialog to the screen
+ * width: function(msgContext, msgContents) {
+ * return $(window).width();
+ * },
+ * ...
+ * ```
+ *
+ * @default 0
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ width?: number | NU.EventHandlers.Alert.Width;
+ /**
+ * Height of the content of the message dialog excluding the title area.
+ * - number: When set to the number type, the entered number (px) is set as the height of the element.
+ * - NU.EventHandlers.Alert.Height: function 타입으로 설정할 경우 msgContext(modal 옵션이 true 일 때 화면에 덮는 요소), msgContents(메시지 콘텐츠 요소)가 인수로 전달되고 return 된 값으로 요소의 높이가 설정됩니다.
+ * ```
+ * ...
+ * // fill the height of the dialog to fill the screen
+ * height: function(msgContext, msgContents) {
+ * // Since msgContents are hidden when the message dialog is opened, we need to call the show() function and then get the height of the title area.
+ * return $(window).height() - msgContents.show().find(".msg_title_box__").height();
+ * },
+ * ...
+ * ```
+ *
+ * @default 0
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ height?: number | NU.EventHandlers.Alert.Height;
+ /**
+ * Sets the title of the message dialog box. If not set, the title bar will not be created.
+ * > It can also be set in the title attribute of the context HTML element.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ title?: string;
+ /**
+ * If set to false, elements related to the default button(OK/Cancel button) will not be created.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ button?: boolean;
+ /**
+ * Defines the options of the Button component applied to the confirmation button of the message dialog.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ okButtonOpts?: NU.Options.Button | null;
+ /**
+ * Defines the options of the Button component applied to the cancel button of the message dialog.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ cancelButtonOpts?: NU.Options.Button | null;
+ /**
+ * Set whether to hide or remove dialog box elements when the message dialog box is closed.
+ * - hide: Hides the message dialog element to maintain its previous state.
+ * - remove: Reset the state by removing the message dialog element.
+ *
+ * @default "remove"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ closeMode?: "hide" | "remove";
+ /**
+ * If set to true, it creates an overlay element that covers the element specified by context, blocking all events except the content of the message dialog box.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ modal?: boolean;
+ /**
+ * If set to false, clicking on the msgContext (the element that covers the screen when the modal option is true) will not close the message dialog.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ overlayClose?: boolean;
+ /**
+ * Specifies the background color of msgContext(the element that covers the screen when the modal option is true).
+ * It can be defined as the color property value of CSS.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ overlayColor?: "string" | null;
+ /**
+ * If set to false, pressing the ESC key will not close the message dialog.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ escClose?: boolean;
+ /**
+ * If set to true it will show OK/Cancel buttons, if set to false it will only show OK buttons.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ confirm?: boolean;
+ /**
+ * If set to true, the message dialog will always appear on top.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ alwaysOnTop?: boolean;
+ /**
+ * When applying the alwaysOnTop option, specify target elements for calculating the top z-index.
+ * > Specified with jQuery selector syntax.
+ *
+ * > When Alert or Popup related elements are hidden by other elements, add a selector for the element that is being hidden.
+ *
+ * @default "div, span, ul, p, nav, article, section, header, footer, aside"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ alwaysOnTopCalcTarget?: string;
+ /**
+ * If set to false, the block overlay will not be resized and the message dialog will be repositioned automatically when the browser resizes or the height of the parent content changes dynamically.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ dynPos?: boolean;
+ /**
+ * If set to true, disables window scrolling in the browser when scrolling with the mouse wheel over message dialog elements.
+ *
+ * Prevents the browser's default behavior of scrolling the browser window up or down the first or last time the message dialog element is scrolled.
+ * > This only works when the modal option is set to true.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ windowScrollLock?: boolean;
+ /**
+ * If set to true, the message dialog can be dragged by the title bar.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ draggable?: boolean;
+ /**
+ * If set to false, the message dialog will not automatically be moved inward when dropped off-screen.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ draggableOverflowCorrection?: boolean;
+ /**
+ * Specifies where the message dialog box will move inward when dropped off the screen.
+ * > If the message dialog box does not return completely inside and a scroll bar appears on the screen, correct the position of the message dialog box by increasing or decreasing it by 1.
+ *
+ * @default { top: 0, bottom: 0, left: 0, right: 0 }
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ draggableOverflowCorrectionAddValues?: {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
+ };
+ /**
+ * When set to true, saves memory usage by removing unnecessary reference elements.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ saveMemory?: boolean;
+ /**
+ * Defines an event handler that runs when the OK button is clicked.
+ * ```
+ * onOk: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > Returning 0 only executes the event handler and does not close the dialog box.
+ *
+ * > This works on the OK button that is created when the button option is set to true.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onOk?: NU.EventHandlers.Alert.OnOk | null;
+ /**
+ * Define an event handler that runs when the message dialog is closed by clicking the Cancel button, clicking the X button, clicking the message overlay element, or pressing the ESC key.
+ * ```
+ * onCancel: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > Returning 0 only executes the event handler and does not close the message dialog.
+ *
+ * > This works on the cancel button created when the button option is set to true.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onCancel?: NU.EventHandlers.Alert.OnCancel | null;
+ /**
+ * Defines an event handler that runs before the message dialog is displayed.
+ * ```
+ * onBeforeShow: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onBeforeShow?: NU.EventHandlers.Alert.OnBeforeShow | null;
+ /**
+ * Defines an event handler that runs after the message dialog is displayed.
+ * ```
+ * onShow: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onShow?: NU.EventHandlers.Alert.OnShow | null;
+ /**
+ * Defines an event handler that runs before the message dialog is hidden.
+ * ```
+ * onBeforeHide: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onBeforeHide event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onBeforeHide?: NU.EventHandlers.Alert.OnBeforeHide | null;
+ /**
+ * Defines an event handler that runs after the message dialog is hidden.
+ * ```
+ * onHide: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onHide event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onHide?: NU.EventHandlers.Alert.OnHide | null;
+ /**
+ * Defines an event handler that runs before the message dialog is removed.
+ * ```
+ * onBeforeRemove: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onBeforeRemove event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onBeforeRemove?: NU.EventHandlers.Alert.OnBeforeRemove | null;
+ /**
+ * Defines an event handler that runs after the message dialog is removed.
+ * ```
+ * onRemove: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onRemove event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0401.html&tab=html/naturaljs/refr/refr040104.html
+ */
+ onRemove?: NU.EventHandlers.Alert.OnRemove | null;
+ isInput?: boolean;
+ isWindow?: boolean;
+ }
+
+ interface Button {
+ /**
+ * Specifies the context element to which the Button will be applied.
+ *
+ * Button's context element must be written with `a`, `button`, or `input[type=button]` tag.
+ * > Buttons can select multiple elements at once and specify them as context.
+ * ```
+ * Button
+ *
+ *
+ * ```
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ context?: NJS;
+ /**
+ * Set the size of the button.
+ *
+ * The size can be one of "none", "smaller", "small", "medium", "large", or "big".
+ *
+ * @default "none"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ size?: ButtonSize;
+ /**
+ * X
+ * Sets the color of the button.
+ *
+ * The color can be one of the following: "none", "primary", "primary_container", "secondary", "secondary_container", "tertiary", "tertiary_container".
+ *
+ * Naming and default values for button colors are based on [Color roles in Material Design 3](https://m3.material.io/styles/color/roles).
+ *
+ * To change the style of the button, simply edit the class starting with "btn_" in the natural.ui.css file.
+ * ```
+ * a.btn_{color}__,input[type='button'].btn_{color}__,button.btn_{color}__ {
+ * color: var(--md-sys-color-on-tertiary);
+ * background-color: var(--md-sys-color-tertiary);
+ * border: 1px solid var(--md-sys-color-tertiary);
+ * }
+ * ```
+ *
+ * @default "none"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ color?: ButtonColor;
+ /**
+ * Configures whether the button should have a filled background or just an outline.
+ *
+ * The type can be one of "none", "filled", "outlined", or "elevated".
+ *
+ * The colors for "filled" and "outlined" types are determined by the `color` option. If the `color` option is set to "none", the button's background or outline will not be displayed.
+ *
+ * @default "none"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ type?: ButtonType;
+ /**
+ * If set to true, the button will be created in a disabled state.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ disable?: boolean;
+ /**
+ * Defines the event handler that is executed before the button options are applied.
+ *
+ * > This can be used when utilizing an external button library, to add necessary HTML elements inside or outside the button element, or to edit the HTML elements for other purposes.
+ * ```
+ * onBeforeCreate: function(context, opts) {
+ * // this: Button instance
+ * // context: context element
+ * // opts: The options specified when the button is created
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ onBeforeCreate?: NU.EventHandlers.Button.OnBeforeCreate | null;
+ /**
+ * Defines the event handler that is executed after the button options are applied.
+ *
+ * > This can be used when utilizing an external button library, to define effect events for the button element or to process the button for other purposes.
+ * ```
+ * onCreate: function(context, opts) {
+ * // this: Button instance
+ * // context: context element
+ * // opts: The options specified when the button is created
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0402.html&tab=html/naturaljs/refr/refr040204.html
+ */
+ onCreate?: NU.EventHandlers.Button.OnCreate | null;
+ }
+
+ interface Datepicker {
+ /**
+ * Specifies the input element to which the Datepicker will be applied.
+ * ```
+ *
+ * ```
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ context?: NJS;
+ /**
+ * Datepicker container element.
+ *
+ * @default N('')
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ contents?: NJS;
+ /**
+ * If set to true, a Monthpicker will be displayed where only the year and month can be selected.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ monthonly?: boolean;
+ /**
+ * If set to false, the Datepicker will not be displayed when the cursor is focused on the input element.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ focusin?: boolean;
+ /**
+ * If set to top, the year selection element will be created at the top.
+ *
+ * @default "left"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ yearsPanelPosition?: "left" | "top";
+ /**
+ * If set to top, the month selection element will be created at the top.
+ *
+ * @default "left"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ monthsPanelPosition?: "left" | "top";
+ /**
+ * When the yearsPanelPosition option value is "top", sets the number of previous years that can be selected.
+ *
+ * @default 200
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ minYear?: number;
+ /**
+ * When the yearsPanelPosition option value is "top", sets the number of future years that can be selected.
+ *
+ * @default 200
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ maxYear?: number;
+ /**
+ * If set to true, when the year changes, the changed date will be reflected immediately in the input element.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ yearChangeInput?: boolean;
+ /**
+ * If set to true, when the month changes, the changed date will be immediately reflected in the input element.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ monthChangeInput?: boolean;
+ /**
+ * If set to true, the month will change when you touch and drag left or right.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ touchMonthChange?: boolean;
+ /**
+ * If set to true, the month will change when you scroll the mouse wheel.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ scrollMonthChange?: boolean;
+ /**
+ * If you select or enter a date earlier than the set date, input will be blocked.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ minDate?: string;
+ /**
+ * If you select or enter a date after the set date, input will be blocked.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ maxDate?: string;
+ /**
+ * If you configure the holiday option, the Datepicker will display holidays.
+ *
+ * Holidays can be configured using `repeat` and `once` objects as shown below:
+ * ```
+ * {
+ * "repeat": {
+ * "0619": "Holiday1",
+ * "0620": "Holiday3",
+ * "0621": ["Holiday6", "Holiday7"],
+ * "0622": ["Holiday9", "Holiday10"]
+ * },
+ * "once": {
+ * "20200619": "Holiday2",
+ * "20200620": ["Holiday4", "Holiday5"],
+ * "20200621": "Holiday8",
+ * "20200622": ["Holiday11", "Holiday12"]
+ * }
+ * }
+ * ```
+ * The `repeat` object specifies holidays that recur every year by providing the month and date (without the year).
+ * The `once` object specifies holidays that do not recur every year and requires the full date in `YYYYMMDD` format.
+ *
+ * If there are multiple holidays on the same date, you can specify multiple holiday names as an array.
+ *
+ * You can configure this in the `N.context.attr("ui").datepicker.holiday` property of the [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html&tab=html/naturaljs/refr/refr010205.html) so that it is applied to all Datepickers:
+ * ```
+ * N.comm("getHolidayList.json").submit(function(data) {
+ * var once = {};
+ * N(data).each(function() {
+ * once[this.holidayDate] = this.holidayName;
+ * });
+ * if (N.context.attr("ui").datepicker.holiday === undefined) {
+ * N.context.attr("ui").datepicker.holiday = {};
+ * }
+ * N.context.attr("ui").datepicker.holiday.once = once;
+ * });
+ * ```
+ * > Elements marked as holidays will have an additional class attribute value of `datepicker_holiday__`.
+ *
+ * @default { "repeat": null, "once": null }
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ holiday?: {
+ "repeat"?: {
+ [key: string]: string | string[];
+ } | null;
+ "once"?: {
+ [key: string]: string | string[];
+ } | null;
+ };
+ /**
+ * Defines an event handler that is executed when the year is changed.
+ * ```
+ * onChangeYear: function(context, year, e) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // year: selected year
+ * // e: event object
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onChangeYear?: NU.EventHandlers.Datepicker.OnChangeYear | null;
+ /**
+ * Defines an event handler that is executed when the month is changed.
+ * ```
+ * onChangeMonth: function(context, month, year, e) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // month: selected month
+ * // year: selected year
+ * // e: event object
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onChangeMonth?: NU.EventHandlers.Datepicker.OnChangeMonth | null;
+ /**
+ * Defines the event handler that is executed when a date or a month (if the `monthonly` option is set to true) is selected.
+ * ```
+ * onSelect: function(context, selDate, monthonly) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // selDate: Selected date as a Date object
+ * // selDate = {
+ * // obj: Date object,
+ * // format: Date format (Refer to Formatter > Format Rule List Tab > "Specify a date format rule as a string" for "date" rule)
+ * // }
+ * // selDate.obj.formatDate("Y-m-d") => "2024-09-26";
+ * // monthonly: value of the monthonly option
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onSelect?: NU.EventHandlers.Datepicker.OnSelect | null;
+ /**
+ * Defines the event handler that is executed before the date picker is displayed.
+ * ```
+ * onBeforeShow: function(context, contents) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // contents: Datepicker panel element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onBeforeShow?: NU.EventHandlers.Datepicker.OnBeforeShow | null;
+ /**
+ * Defines an event handler that runs after the datepicker is displayed.
+ * ```
+ * onShow: function(context, contents) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // contents: Datepicker panel element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onShow?: NU.EventHandlers.Datepicker.OnShow | null;
+ /**
+ * Defines an event handler that runs before the datepicker is closed.
+ * ```
+ * onBeforeHide: function(context, contents) {
+ * // this: Datepicker instance
+ * // context: context element
+ * // contents: Datepicker panel element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onBeforeHide?: NU.EventHandlers.Datepicker.OnBeforeHide | null;
+ /**
+ * Defines an event handler that runs after the datepicker is closed (after the closing effect ends).
+ * ```
+ * onHide: function(context) {
+ * // this: Datepicker instance
+ * // context: context element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0403.html&tab=html/naturaljs/refr/refr040304.html
+ */
+ onHide?: NU.EventHandlers.Datepicker.OnHide | null;
+ }
+
+ interface Popup {
+ /**
+ * Specifies the Block element inside the page to create as a popup.
+ *
+ * > Since the element inside the page is turned into a popup, the `url` option must not be set.
+ * ```
+ * N("context").popup();
+ * ```
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ context?: NJS;
+ /**
+ * Specifies the URL of the page to be displayed in a popup.
+ *
+ * > Once the popup page has finished loading, the `init` method of the popup page will be called.
+ *
+ * > Since a different page is being loaded to create the popup, the `context` option should not be specified.
+ * ```
+ * N().popup("url");
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ url?: string;
+ /**
+ * Sets the title of the popup. If not set, the title bar is not created.
+ *
+ * > If the `url` option is specified, the title can also be set using the `title` attribute of the `view` element from the loaded page.
+ * When creating a popup by specifying a context, the title can be set using the `title` attribute of the context element.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ title?: string;
+ /**
+ * If set to false, it does not create basic button-related elements (OK/Cancel buttons).
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ button?: boolean;
+ /**
+ * If set to true, it creates an overlay element that covers the entire screen,
+ * blocking all interactions except for the popup content.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ modal?: boolean;
+ /**
+ * The position(px) to the top of the popup.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ top?: number;
+ /**
+ * The position(px) to the left of the popup.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ left?: number;
+ /**
+ * Width of the popup.
+ * - number: When set to the number type, the entered number(px) is set as the width of the element.
+ * - NU.EventHandlers.Popup.Width: When set to a function type, msgContext (element that covers the screen when the modal option is true) and msgContents (message content element) are passed as arguments, and the width of the element is set with the returned value.
+ * ```
+ * ...
+ * // Fill the width of the popup to the screen
+ * width: function(msgContext, msgContents) {
+ * return $(window).width();
+ * },
+ * ...
+ * ```
+ *
+ * @default 0
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ width?: NU.EventHandlers.Popup.Width | number;
+ /**
+ * Height of the content of the popup excluding the title area.
+ * - number: When set to the number type, the entered number (px) is set as the height of the element.
+ * - NU.EventHandlers.Popup.Height: function 타입으로 설정할 경우 msgContext(modal 옵션이 true 일 때 화면에 덮는 요소), msgContents(메시지 콘텐츠 요소)가 인수로 전달되고 return 된 값으로 요소의 높이가 설정됩니다.
+ * ```
+ * ...
+ * // fill the height of the popup to fill the screen
+ * height: function(msgContext, msgContents) {
+ * // Since msgContents are hidden when the popup is opened, we need to call the show() function and then get the height of the title area.
+ * return $(window).height() - msgContents.show().find(".msg_title_box__").height();
+ * },
+ * ...
+ * ```
+ *
+ * @default 0
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ height?: number | NU.EventHandlers.Popup.Height;
+ /**
+ * An option for referencing the parent page's Controller object from the popup's Controller object.
+ *
+ * When you assign the Controller object of the page creating the popup to the opener option, it will be passed to the popup’s Controller object as its opener property.
+ *
+ * > This only works when you set the url option to create another page as popup content.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ opener?: NA.Objects.Controller.Object | null;
+ /**
+ * Sets whether to hide or remove the popup element when the popup is closed.
+ * - hide: Hides the popup element and maintains the previous state.
+ * - remove: Removes the popup element to reset its state.
+ *
+ * @default "hide"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ closeMode?: "hide" | "remove";
+ /**
+ * If set to true, the popup will always appear on top.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ alwaysOnTop?: boolean;
+ /**
+ * If set to false, the popup will not close when clicking the msgContext
+ * (the element covering the screen when the modal option is true).
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ overlayClose?: boolean;
+ /**
+ * If set to false, the popup will not close when pressing the ESC key.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ escClose?: boolean;
+ /**
+ * Defines an event handler that runs when the OK button is clicked.
+ * ```
+ * onOk: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > Returning 0 only executes the event handler and does not close the dialog box.
+ *
+ * > This works on the OK button that is created when the button option is set to true.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onOk?: NU.EventHandlers.Popup.OnOk | null;
+ /**
+ * Define an event handler that runs when the message dialog is closed by clicking the Cancel button, clicking the X button, clicking the message overlay element, or pressing the ESC key.
+ *
+ * ```
+ * onCancel: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > Returning 0 only executes the event handler and does not close the dialog box.
+ *
+ * > This works on the cancel button created when the button option is set to true.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onCancel?: NU.EventHandlers.Popup.OnCancel | null;
+ /**
+ * Define an event handler that fires before the pop-up is displayed.
+ * ```
+ * onBeforeShow: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onBeforeShow?: NU.EventHandlers.Popup.OnBeforeShow | null;
+ /**
+ * Define an event handler that fires after the pop-up is displayed.
+ * ```
+ * onShow: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onShow?: NU.EventHandlers.Popup.OnShow | null;
+ /**
+ * Define an event handler that fires before the popup is hidden.
+ * ```
+ * onBeforeHide: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onBeforeHide event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onBeforeHide?: NU.EventHandlers.Popup.OnBeforeHide | null;
+ /**
+ * Define an event handler that fires after the popup is hidden.
+ * ```
+ * onHide: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onHide event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onHide?: NU.EventHandlers.Popup.OnHide | null;
+ /**
+ * Define an event handler that fires before the popup is removed.
+ * ```
+ * onBeforeRemove: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onBeforeRemove event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onBeforeRemove?: NU.EventHandlers.Popup.OnBeforeRemove | null;
+ /**
+ * Define an event handler that fires after the popup is removed.
+ * ```
+ * onRemove: function(msgContext, msgContents) {
+ * // this: Alert instance
+ * // msgContext: Message overlay element
+ * // msgContents: Message dialog element
+ * }
+ * ```
+ * > If the closeMode option is set to hide, the onRemove event will not fire.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onRemove?: NU.EventHandlers.Popup.OnRemove | null;
+ /**
+ * Defines an event handler that is executed every time the popup is opened.
+ *
+ * > The function name is defined as a string, and the actual event handler method must be implemented in the Controller object of the popup content using the specified function name.
+ *
+ * > The first argument of the `open` method is passed as the first argument (`onOpenData`) to the onOpen event handler function.
+ *
+ * > If the popup content is loaded for the first time, the `init` function of the Controller object is executed before the `onOpen` function.
+ *
+ * > This only works when you set the `url` option to load another page as popup content.
+ *
+ * - Popup instance example:
+ * ```
+ * N(".popup").cont({
+ * ...
+ * init: function(view, request) {
+ * var popup = N().popup({
+ * url: "./popup.html",
+ * onOpen: "onOpenFn"
+ * });
+ *
+ * popup.open([1, 2, 3]);
+ * }
+ * ...
+ * });
+ * ```
+ * - Popup's Controller object example:
+ * ```
+ * N(".popup").cont({
+ * ...
+ * onOpenFn: function(onOpenData) {
+ * console.log(onOpenData);
+ *
+ * // [1, 2, 3]
+ * }
+ * ...
+ * });
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onOpen?: string | NU.EventHandlers.Popup.OnOpen | null;
+ /**
+ * Sets the data of the parent page to pass as the first argument of the onOpen event handler function.
+ *
+ * The first argument value of the open method will be set to this value.
+ *
+ * > This only works when you set the `url` option to create another page as popup content.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onOpenData?: any;
+ /**
+ * Defines an event handler that is executed whenever the popup is closed.
+ * ```
+ * onClose: function(onCloseData) {
+ * // this: Popup instance
+ * // onCloseData: The first argument passed to the caller's close function of the Controller object invoked from the popup.
+ * }
+ * ```
+ * > When the popup content loading is complete, a `caller` property is created on the Controller object of the popup. The `caller` refers to the Popup instance of the parent page that created this popup.
+ * To close its own popup, this popup can execute the command `this.caller.close(onCloseData);` from the Controller object. When this command is executed and the popup closes, the `onClose` event handler function receives the `onCloseData` as its first argument.
+ *
+ * > This only works when you set the `url` option to create another page as the popup content.
+ *
+ * - Popup instance example
+ * ```
+ * N(".popup").cont({
+ * ...
+ * init: function(view, request) {
+ * var popup = N().popup({
+ * url: "./popup.html",
+ * onClose: function(onCloseData) {
+ * console.log(onCloseData);
+ *
+ * // [1, 2, 3]
+ * }
+ * });
+ * }
+ * ...
+ * });
+ * ```
+ * - Controller object of the popup
+ * ```
+ * N(".popup").cont({
+ * ...
+ * events: function() {
+ * var caller = this.caller;
+ * N(".close", this.view).on("click", function(onCloseData) {
+ *
+ * caller.close([1, 2, 3]);
+ *
+ * });
+ * }
+ * ...
+ * });
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onClose?: NU.EventHandlers.Popup.OnClose | null;
+ /**
+ * Sets the data of the popup page to be passed as the first argument of the onClose event handler.
+ *
+ * The value of the first argument of the `this.caller.close` method in the popup's Controller object is set to this value.
+ *
+ * > This only works when you set the `url` option to create another page as popup content.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onCloseData?: any;
+ /**
+ * Defines the event handler that runs when the popup content has finished loading.
+ *
+ * ```
+ * onLoad: function(cont) {
+ * // this: Popup instance
+ * // cont: The Controller object for the popup
+ * }
+ * ```
+ * > This only works when you set the `url` option to create another page as popup content.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ onLoad?: NU.EventHandlers.Popup.OnLoad | null;
+ /**
+ * If set to true, the popup's content is preloaded when the popup is initialized;
+ * if set to false, the popup's content is loaded when the popup is opened for the first time.
+ *
+ * > This option works only when the `url` option is set to create popup content from another page.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ preload?: boolean;
+ /**
+ * If set to false, it does not automatically adjust the size of the block overlay and the position of the popup when resizing the browser window or when the parent's content height changes dynamically.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ dynPos?: boolean;
+ /**
+ * If set to true, it disables the browser's window scroll when scrolling with the mouse wheel over a popup element.
+ *
+ * This blocks the browser's default behavior of scrolling up or down when the popup element reaches its top or bottom scroll limit.
+ *
+ * > Only works when the modal option is set to true.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ windowScrollLock?: boolean;
+ /**
+ * Enables dragging the popup dialog box using the title bar when set to `true`.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ draggable?: boolean;
+ /**
+ * When set to `false`, the popup will not automatically move back inside the screen if dropped outside of it.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ draggableOverflowCorrection?: boolean;
+ /**
+ * Specifies where the popup will move inward when dropped off the screen.
+ * > If the popup does not return completely inside and a scroll bar appears on the screen, correct the position of the popup by increasing or decreasing it by 1.
+ *
+ * @default { top: 0, bottom: 0, left: 0, right: 0 }
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ draggableOverflowCorrectionAddValues?: {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
+ };
+ /**
+ * When set to true, saves memory usage by removing unnecessary reference elements.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0404.html&tab=html/naturaljs/refr/refr040404.html
+ */
+ saveMemory?: boolean;
+ }
+
+ interface EachTab {
+ /**
+ * Specifies the URL of the page to be created as tab content.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ url?: string;
+ /**
+ * If set to true, the tab and its content will be selected by default after the tabs are initialized.
+ *
+ * > The `active` option should be set to true for only one tab to be displayed by default.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ active?: boolean;
+ /**
+ * If set to true, the page for the tab content will be preloaded during the tab initialization instead of loading it the first time the tab is selected.
+ *
+ * This is used when you need to reference elements or the Controller object of the tab content during initialization.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ preload?: boolean;
+ /**
+ * Specifies the name of the `onOpen` event handler function as a string that will be executed in the loaded content whenever a tab is opened.
+ * - The `onOpen` event handler function must be defined in the Controller object of the page being loaded with the specified name.
+ * - The first argument of the `onOpen` event handler function is the `onOpenData` specified as the second argument when calling the `open` function.
+ * - When tab content is loaded for the first time, the `init` function of the Controller object is executed, followed by the `onOpen` function.
+ * - If an `onActive` event is defined, the `onActive` function is executed first, followed by the `onOpen` function.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ onOpen?: string | NU.EventHandlers.Tab.OnOpen;
+ /**
+ * When set to `true`, the specified tab is created in a disabled state.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ disable?: boolean;
+ /**
+ * When set to `true`, the status of tab content is not preserved, and the associated tab content is reloaded and initialized each time the tab is selected.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ stateless?: boolean;
+ }
+ interface Tab {
+ /**
+ * Specifies the context element where the Tab will be applied.
+ *
+ * The context element for the Tab must be written using the `div` tag,
+ * containing `ul`, `li`, and additional `div` tags.
+ *
+ * - Tab
+ * - The tab elements are created using the `li` tags inside a `ul` tag.
+ * - The `href` attribute of the tab link (`` tag) should match the `id` attribute
+ * of the corresponding tab content (`
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ context?: NJS;
+ /**
+ * A variable that only contains instances of tab link elements.
+ *
+ * @default null
+ */
+ links?: NJS | null;
+ /**
+ * A variable that only contains instances of tab content elements.
+ *
+ * @default null
+ */
+ contents?: NJS | null;
+ /**
+ * Instead of using the `data-opts` attribute of a tab element, you can specify the options for individual tabs as an array of objects.
+ *
+ * The options should be configured as objects according to the order and number of tabs.
+ * ```
+ * N("#tab").tab({
+ * tabOpts: [
+ * { width: "auto", url: "tab1.html", preload: false, active: false }, //Tab1
+ * { width: "auto", url: "tab2.html", preload: false, active: false }, //Tab2
+ * { width: "auto", url: "tab3.html", preload: false, active: false, onOpen: "onOpen" } //Tab3
+ * ]
+ * });
+ * ```
+ * You can also specify options via the `data-opts` attribute directly on the tab tags (`
` elements).
+ *
+ * For detailed explanations of individual options, please refer to the [declarative options](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040505.html) tab.
+ *
+ * @default []
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ tabOpts?: NU.Options.EachTab[];
+ /**
+ * If set to `true`, the tab and tab content will be displayed randomly when the tab is initialized.
+ * If set to `false`, the first tab will be displayed.
+ *
+ * > If the `active` option is set to `true` among the tab options, the `active` option will take precedence.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ randomSel?: boolean;
+ /**
+ * This option allows the Controller (N.cont) object of the parent page, where the Tab instance was created,
+ * to be referenced from the Controller object in the tab content when the `url` option is set in the tab options to load another page.
+ *
+ * When creating a Tab instance, you can specify the Controller object in the `opener` option.
+ * This will pass the Controller object of the parent page into the `opener` property of the tab content page's Controller object.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ opener?: NA.Objects.Controller.Object | null;
+ /**
+ * Defines an event handler that is executed every time a tab is activated.
+ *
+ * ```
+ * onActive: function(tabIdx, tabEle, contentEle, tabEles, contentEles) {
+ * // this: Tab instance
+ * // tabIdx: Index of the activated tab
+ * // tabEle: Element of the activated tab
+ * // contentEle: Element of the activated content
+ * // tabEles: All tab elements
+ * // contentEles: All content elements
+ * }
+ * ```
+ * > When tab content is loaded for the first time, the `init` function of the Controller object is executed before the `onActive` function is executed.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ onActive?: NU.EventHandlers.Tab.OnActive | null;
+ /**
+ * Defines an event handler that is executed when tab content loading is complete.
+ *
+ * ```
+ * onLoad: function(tabIdx, tabEle, contentEle, cont) {
+ * // this: Tab instance
+ * // tabIdx: Index of the activated tab
+ * // tabEle: Element of the activated tab
+ * // contentEle: Element of the activated content
+ * // cont: Controller object of the loaded tab content
+ * }
+ * ```
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ onLoad?: NU.EventHandlers.Tab.OnLoad | null;
+ /**
+ * If set to `true`, the `onActive` event is not triggered when the tab is created, and the default tab is selected.
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ blockOnActiveWhenCreate?: boolean;
+ /**
+ * When set to true, tabs can be scrolled using mouse drag, touch, or the first/last buttons.
+ *
+ * To scroll tabs using the first/last buttons, you need to include `a` tags and `span` tags as the first and last child elements of the `ul` tag.
+ * ```
+ *
+ * ```
+ *
+ * @default false
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ tabScroll?: boolean;
+ /**
+ * Due to styles (CSS) applied to tab elements, the last tab may be either cut off or have additional spacing. In such cases, you can adjust the following options in the `tabScrollCorrection` object to display the tabs correctly:
+ * - tabContainerWidthCorrectionPx: An option that allows you to increment or decrement by 1 to correct the tab appearance when the last tab is cut off or has extra spacing.
+ * - tabContainerWidthReCalcDelayTime: An option that allows you to re-adjust the tab appearance by incrementing or decrementing by 1 when the tabs are first displayed and are either cut off or have extra spacing.
+ * ```
+ * N("#tab").tab({
+ * tabScrollCorrection: {
+ * tabContainerWidthCorrectionPx: 1,
+ * tabContainerWidthReCalcDelayTime: 0
+ * }
+ * });
+ * ```
+ * [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html&tab=html/naturaljs/refr/refr010205.html) If you set the `tabScrollCorrection` option in the N.context.attr("ui").tab property of the configuration, it will be applied to all Tab components.
+ *
+ * @default { tabContainerWidthCorrectionPx: 0, tabContainerWidthReCalcDelayTime: 0 }
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0405.html&tab=html/naturaljs/refr/refr040504.html
+ */
+ tabScrollCorrection?: {
+ tabContainerWidthCorrectionPx?: number;
+ tabContainerWidthReCalcDelayTime?: number;
+ };
+ }
+
+ interface Select {
+ /**
+ * Specifies the data to bind to the Select element.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ data?: NJS;
+ /**
+ * Specifies the context element where the Select will be applied.
+ *
+ * The context element for Select must be written as a `select` or input tags with `type=checkbox` or `type=radio`.
+ * ```
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ context?: NJS;
+ /**
+ * Specifies the property name of the data to be bound to the name attribute of the selected element.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ key?: string;
+ /**
+ * Specifies the property name of the data to be bound to the value attribute of the selected element.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ val?: string;
+ /**
+ * If set to `false`, clears the default options in the select element before binding the data.
+ *
+ * @default true
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ append?: boolean;
+ /**
+ * If the context is `input[type=checkbox]` or `input[type=radio]`, specifies the direction in which the selected elements are placed.
+ * - h: Horizontal
+ * - v: Vertical
+ *
+ * @default "h"
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ direction?: "h" | "v";
+ /**
+ * Select element type
+ * - 1: select
+ * - 2: select[multiple='multiple']
+ * - 3: radio
+ * - 4: checkbox
+ *
+ * @default 0
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ type?: 0 | 1 | 2 | 3 | 4;
+ /**
+ * This variable is assigned with the instance of the default template element when it's a radio or checkbox.
+ *
+ * @default null
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0406.html&tab=html/naturaljs/refr/refr040604.html
+ */
+ template?: NJS | null;
+ }
+
+ interface Form {
+ /**
+ * Specifies the data to bind to the Form.
+ *
+ * Although the Form represents a single data component, the bound data is of a JSON object array type.
+ *
+ * @default undefined
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040704.html
+ */
+ data?: NJS;
+ /**
+ * Specifies the index value of the row from the list data indicated by the data option to bind to the form.
+ *
+ * The default value is -1, but if no value is entered, it will be set to 0, binding the first row of the list data to the form.
+ *
+ * @default -1
+ *
+ * @see https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0407.html&tab=html/naturaljs/refr/refr040704.html
+ */
+ row?: number;
+ /**
+ * Specifies the context element to apply to the Form.
+ *
+ * The context element of the Form can be written as tags that represent regions such as table, div, section, etc.
+ *
+ * If the property name of the data matches the id attribute value of the element, the data is bound.
+ *
+ * > All data-related components of Natural-JS use the id attribute for fast binding speed, which is inevitable.
+ * ```
+ *