### Datepicker Initialization Examples

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Datepicker.md

Demonstrates various ways to initialize the Datepicker component, including basic setup, month-only selection, and integration with form binding.

```APIDOC
## Examples

### 1. Creating a Datepicker

```html
<input class="datepicker" type="text">

<script type="text/javascript">
  N(".datepicker").datepicker();
</script>
```

### 2. Creating a Monthpicker

```html
<input class="datepicker" type="text">

<script type="text/javascript">
  N(".datepicker").datepicker({
    monthonly: true
  });
</script>
```

### 3. Automatically creating a Datepicker by specifying the "date" format rule when binding data with N.form, N.grid, or N.list

```html
<div class="form">
  <input id="datepicker" type="text" data-format='[["date", 8, "date"]]'>
</div>

<script type="text/javascript">
  N({ datepicker: "20141212" }).form(".form").bind();
</script>
```
```

--------------------------------

### Usage Examples

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Documents.md

Practical examples demonstrating how to use the Shell Documents API.

```APIDOC
## Usage Examples

### Open a new document (tab)
```javascript
docs.add({
  url: 'page.html',
  title: 'New Page',
  params: { foo: 'bar' }
});
```

### Pass parameters between documents
```javascript
// In the parent document
const request = docs.cont(docId).request;
request.attr('userId', 123);

// In the child document
const userId = request.attr('userId');
```
```

--------------------------------

### Loading a page as a popup

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Popup.md

This example shows how to create a popup by loading content from a specified URL.

```APIDOC
## Example: Loading a page as a popup

```javascript
const popup = N().popup("page.html");
popup.open();
```
```

--------------------------------

### Install Natural-JS via npm

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-GETTINGSTARTED.md

Use npm to install the Natural-JS library. This command fetches the latest version from the npm registry.

```bash
npm install @bbalganjjm@natural_js
```

--------------------------------

### Basic List Creation and Data Binding Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-List.md

Demonstrates how to create a list component from an HTML structure and bind initial data to it.

```APIDOC
### Basic List Creation and Data Binding

```html
<ul id="basic-list">
    <li>
        <span id="name"></span>
        <span id="age"></span>
        <span id="email"></span>
    </li>
</ul>

<script type="text/javascript">
    // Data object
    const data = [
        {
            name: "Hong Gil-dong",
            age: 30,
            email: "hong@example.com"
        },
        {
            name: "Kim Cheol-su",
            age: 25,
            email: "kim@example.com"
        },
        {
            name: "Lee Young-hee",
            age: 28,
            email: "lee@example.com"
        }
    ];
    // Create List component and bind data
    const list = N(data).list("#basic-list").bind();
</script>
```
```

--------------------------------

### Creating a popup from a specified element

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Popup.md

This example demonstrates how to initialize and open a popup using an existing HTML element as its content.

```APIDOC
## Example: Creating a popup from a specified element (.popupArea)

```html
<div title="Popup Example" class="popupArea" style="height: 200px; border: 3px dotted var(--md-sys-color-outline-variant);">Popup Block...</div>

<script type="text/javascript">
  N(".popupArea").popup().open();
</script>
```
```

--------------------------------

### Basic Form Creation and Data Binding Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Form.md

Demonstrates how to create a Form component, bind initial data, and perform validation.

```APIDOC
### 1. Basic Form Creation and Data Binding

```html
<table id="form-example">
    <tr>
        <th><label for="name">Name</label></th>
        <td><input id="name" type="text" data-validate='[["required"]]'></td>
    </tr>
    <tr>
        <th><label for="email">Email</label></th>
        <td><input id="email" type="text" data-validate='[["required"], ["email"]]'></td>
    </tr>
    <tr>
        <th><label for="age">Age</label></th>
        <td><input id="age" type="number" data-validate='[["required"], ["number"]]'></td>
    </tr>
</table>

<script type="text/javascript">
    // Data object
    const data = [{
        name: "Hong Gil-dong",
        email: "hong@example.com",
        age: 30
    }];
    // Create Form component and bind data
    const form = N(data).form("#form-example").bind();
    // Validation
    if (form.validate()) {
        console.log("Validation successful");
    }
    // Get data
    const formData = form.data(true);
    console.log(formData);
</script>
```
```

--------------------------------

### Component Initialization

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

Example of automatically initializing button, form, list, and grid components after a page loads, and then executing an init function.

```APIDOC
## Component Initialization

### Description
This code demonstrates how to initialize various UI components (button, form, list, grid) after a page is loaded and then execute a custom init function. It also shows how to retrieve component instances from the context.

### Code Example
```javascript
N.context.attr("architecture", {
    // ... other configurations
    "cont" : {
        "advisors" : [{
            "pointcut" : "^init$",
            "adviceType" : "around",
            "fn" : function(cont, fnChain, args, joinPoint){
                // 1. Initialize button components
                N(".button").button();

                // 2. Initialize form components
                N(".form", cont.view).each(function() {
                    N([]).form(this);
                })

                // 3. Initialize list components
                N(".list", cont.view).each(function() {
                    N([]).list(this);
                })

                // 4. Initialize grid components
                N(".grid", cont.view).each(function() {
                    N([]).grid(this);
                })

                // 5. Execute init function
                joinPoint.proceed();

                // 6. Afterwards, retrieve each component instance from the context as needed
                var grid01 = N("#grid01", cont.view).instance("grid");
                grid01.bind([]);
            }
        }]
    },
    // ... other configurations
})
```
```

--------------------------------

### Add AOP Advice for Natural-TEMPLATE Installation

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TEMPLATE.md

Complete the Natural-TEMPLATE installation by adding AOP advice to the `N.context.attr("architecture").cont` property in `natural.config.js`. This configuration is for the `onOpen` event.

```javascript
"cont" : {
    "advisors" : [{
        "pointcut" : "^onOpen",
        "adviceType" : "around",
        "fn" : function(cont, fnChain, args, joinPoint) {
            if(cont.onOpenDefer || (cont.caller && cont.caller.options.preload)) {
                joinPoint.proceed();
            } else {
                cont.onOpenDefer = $.Deferred().done(function() {
                    joinPoint.proceed();
                });
            }
        }
    }]
},
```

--------------------------------

### Initialize and Use Typed Grid Component

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TYPESCRIPT.md

Example of initializing a grid component with specific types and retrieving typed data.

```typescript
// Grid component initialization
const grid = N([] as NC.JSONObject[]).grid({
  context: "#userGrid",
  height: 400,
  select: true,
  sortable: true
}) as NC.Grid;

// Get typed grid data
const gridData: NC.JSONObject[] = grid.getData();
```

--------------------------------

### Usage Example: Displaying a message with options

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Notify.md

Demonstrates how to display a notification message with custom options, including position and navigation URL.

```APIDOC
## Usage Example: Displaying a message with options

### Description
This example shows how to instantiate N.notify with specific options and then add a message that navigates to a URL when clicked.

### Code
```javascript
N({
    top: 5,
    right: 10
}).notify().add("The Natural-JS API manual has been updated.", "http://bbalganjjm.github.io/natural_js/");
```
```

--------------------------------

### Validation Examples

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Provides various examples of how to implement and trigger validation using N.validator, including attribute-based rules, direct rule usage, and event triggering.

```APIDOC
## Validation Examples

### Declare validation rules in the data-validate attribute

#### Example HTML
```html
<input id="col01" type="text" data-validate='[["required"]]'>
```

**Note:** Validation is triggered when the element loses focus. If validation fails, a tooltip with the reason is shown next to the input.

### Using N.validator library for validation

#### Example JavaScript
```javascript
// N.validator.{rule}("String to validate", ...arguments);
const isValid = N.validator.rangevalue("Validation string", [1, 9]); // false
```

### Triggering validator-related events directly

#### Example JavaScript
```javascript
N("input[name='targetEle']").trigger("validate");
```

### Dynamically changing validation rules and applying immediately

#### Example JavaScript
```javascript
N("selector").data("validate", [["required"]]).trigger("validate");
```
```

--------------------------------

### Declare and Initialize a Controller Object

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TYPESCRIPT.md

Example of declaring a controller with typed initialization functions and variables.

```typescript
// Controller declaration
const cont = N(".page-id").cont({
  init: (view: JQuery, request: NC.Request): void => {
    // Initialization code
  },
  loadData: (): void => {
    // Data loading function
  },
  // Typed variable declarations
  counter: 0 as number,
  userData: {} as NC.JSONObject
});
```

--------------------------------

### Adding New Data Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Form.md

Shows how to initialize a Form component with empty data and add a new row.

```APIDOC
### 2. Adding New Data

```javascript
// Create Form instance with empty data
const form = N([]).form("#form-example");
// Add new data (empty form)
form.add();
// After user fills the form, validate and save
if (form.validate()) {
    const newData = form.data(true);
    console.log("New data:", newData);
}
```
```

--------------------------------

### Example: Sorting Products by Price (Ascending)

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Demonstrates sorting an array of product objects by their price in ascending order using the N.data.sort function.

```javascript
// Sorting data:
const products = [
    { id: 1, name: "Laptop", price: 1200 },
    { id: 2, name: "Phone", price: 800 },
    { id: 3, name: "Tablet", price: 500 },
    { id: 4, name: "Desktop", price: 1500 }
];
const sortedByPrice = N.data.sort(products, "price", false);
// Result: [{ id: 3, name: "Tablet", price: 500 }, { id: 2, name: "Phone", price: 800 }, { id: 1, name: "Laptop", price: 1200 }, { id: 4, name: "Desktop", price: 1500 }]
```

--------------------------------

### Checkbox Integration Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-List.md

Shows how to integrate checkboxes with the list component for row selection, including a 'select all' functionality.

```APIDOC
### Checkbox Integration

```html
<div>
    <input type="checkbox" id="check-all"> <label for="check-all">Select All</label>
</div>
<ul id="checkbox-list">
    <li>
        <input type="checkbox" class="row-check">
        <span id="name"></span>
        <span id="age"></span>
    </li>
</ul>

<script type="text/javascript">
    // Data object
    const data = [ { name: "Hong Gil-dong", age: 30 },
        { name: "Kim Cheol-su", age: 25 }
    ];
    // Create List component and bind data (with checkbox integration)
    const list = N(data).list({
        context: "#checkbox-list",
        checkAll: N("#check-all"),
        checkAllTarget: ".row-check"
    }).bind();
    // Check checked data
    N("#check-button").on("click", () => {
        const checkedData = list.data("checked");
        console.log("Checked data:", checkedData);
    });
</script>
```
```

--------------------------------

### Creating a draggable popup by loading a page

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Popup.md

This example illustrates how to create a popup from a URL with additional configurations, such as setting a title, width, and enabling dragging.

```APIDOC
## Example: Creating a draggable popup by loading a page

```javascript
const popup = N().popup({
  url: "page.html",
  title: "Title",
  width: 800,
  draggable: true
});
popup.open();
```
```

--------------------------------

### Example: Sorting Products by Name (Descending)

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Demonstrates sorting an array of product objects by their name in descending order using the N.data.sort function.

```javascript
const sortedByName = N.data.sort(products, "name", true);
// Result: [{ id: 3, name: "Tablet", price: 500 }, { id: 2, name: "Phone", price: 800 }, { id: 1, name: "Laptop", price: 1200 }, { id: 4, name: "Desktop", price: 1500 }]
```

--------------------------------

### Natural-JS Index Page Setup

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-GETTINGSTARTED.md

This HTML file sets up the basic structure for a Natural-JS application. It includes necessary library imports and uses N.comm to load the initial page content.

```html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>Natural-JS</title>
<script type="text/javascript" src="js/natural_js/lib/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/natural_js/css/natural.ui.css" />
<script type="text/javascript" src="js/natural_js/natural.js.min.js"></script>
<script type="text/javascript" src="js/natural_js/natural.config.js"></script>

<script type="text/javascript">
    $(document).ready(() => {
        N(N.context.attr("architecture").page.context).comm("block01.html").submit();
    });
</script>

</head>
<body>
    <!-- Page Context(N.context.attr("architecture").page.context) element. -->
    <div id="contents"></div>
</body>
</html>
```

--------------------------------

### Natural-JS Configuration Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-GETTINGSTARTED.md

Configure Natural-JS by setting context attributes in `natural.config.js`. Specify container elements for architecture and UI components like alerts.

```javascript
/* Natural-ARCHITECTURE Config */
N.context.attr("architecture", {
    "page" : {
        "context" : "#contents"
    },
    ...
/* Natural-UI Config */
N.context.attr("ui", {
    "alert" : {
        "container" : "#contents"
    ...

```

--------------------------------

### Retrieve Data with Callback

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

Basic example of retrieving JSON data using a callback function to log the received data.

```javascript
N.comm("data.json").submit(function(data) {
    N.log(data);
});
```

--------------------------------

### Example: Sorting Data with jQuery Plugin

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Shows how to use the datasort jQuery plugin to sort an array of product objects by price in descending order.

```javascript
const sortedByPriceJQuery = N(products).datasort("price", true);
// Result: jQuery object containing sorted product list
```

--------------------------------

### Install Natural-TEMPLATE JavaScript Library

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TEMPLATE.md

Include the Natural-TEMPLATE JavaScript library by adding a script tag to your HTML. Ensure the path to the minified file is correct.

```html
<script type="text/javascript" src="js/natural_js/natural.template.min.js" charset="utf-8"></script>
```

--------------------------------

### Defining View and Controller with Initialization Logic

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

An example demonstrating the definition of a view element and its associated Controller. The Controller's init function is used to apply CSS styling to a paragraph element within the view.

```html
<!-- View -->
<article class="view">
    <p>View</p>
</article>

<!-- Controller -->
<script type="text/javascript">
    N(".view").cont({
        init(view, request) {
            N("p", view).css("padding", "10px");
        }
    });
</script>
```

--------------------------------

### Example: Filtering Users by Name String

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Demonstrates filtering an array of user objects to find a user by name using a string condition.

```javascript
const userNamedMike = N.data.filter(users, 'name === "Mike"');
// Result: [{ id: 2, name: "Mike", age: 32, active: false }]
```

--------------------------------

### Controller init Method Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

Defines the init function for a Controller, which is called after the view is loaded and the Controller object is initialized. It receives the view element and a Communicator.request object.

```javascript
N(".view").cont({
    init : function(view, request) {
    }
});
```

--------------------------------

### Example Data for Select Component

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Select.md

Defines an array of objects to be used as data for the Select component. Each object should have properties corresponding to the 'key' and 'val' options.

```javascript
const data = [
  { key: 'blue', val: 'blue' },
  { key: 'brown', val: 'brown' },
  { key: 'green', val: 'green' }
];
```

--------------------------------

### Get All Instances with .instance() Callback

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Retrieve all instances stored in selected elements by passing a callback function to .instance(). The callback receives all found instances.

```javascript
$("#element").instance(function(instances) {
  // Handle instances
});
```

--------------------------------

### Usage Example: Displaying a message with HTML content

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Notify.md

Illustrates how to display a notification message that renders HTML content, allowing for rich text formatting.

```APIDOC
## Usage Example: Displaying a message with HTML content

### Description
This example demonstrates how to configure N.notify to render HTML content within the notification message and navigate to a specified URL.

### Code
```javascript
N({
    bottom: 10,
    right: 10
}).notify({
    html: true
}).add("<b>Bold</b> and <i>italic</i> text in notification.", "https://example.com");
```
```

--------------------------------

### Example: Filtering Active Users by Age

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Demonstrates filtering an array of user objects to find active users under a certain age using a function condition.

```javascript
// Filtering data:
const users = [
    { id: 1, name: "John", age: 28, active: true },
    { id: 2, name: "Mike", age: 32, active: false },
    { id: 3, name: "Sarah", age: 25, active: true },
    { id: 4, name: "David", age: 35, active: true }
];
const activeUsers = N.data.filter(users, user => user.active === true && user.age < 30);
// Result: [{ id: 1, name: "John", age: 28, active: true }, { id: 3, name: "Sarah", age: 25, active: true }]
```

--------------------------------

### Installing jQuery Types

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TYPESCRIPT.md

Natural-JS relies on jQuery. Ensure type safety by installing the corresponding TypeScript types for jQuery.

```bash
npm install --save-dev @types/jquery
```

--------------------------------

### Basic List Creation and Data Binding

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-List.md

Demonstrates how to create a list component and bind initial data to HTML elements with matching IDs. Ensure your data keys correspond to the IDs of the elements within each list item.

```html
<ul id="basic-list">
    <li>
        <span id="name"></span>
        <span id="age"></span>
        <span id="email"></span>
    </li>
</ul>
```

```javascript
    // Data object
    const data = [
        {
            name: "Hong Gil-dong",
            age: 30,
            email: "hong@example.com"
        },
        {
            name: "Kim Cheol-su",
            age: 25,
            email: "kim@example.com"
        },
        {
            name: "Lee Young-hee",
            age: 28,
            email: "lee@example.com"
        }
    ];
    // Create List component and bind data
    const list = N(data).list("#basic-list").bind();
```

--------------------------------

### Configure Grid with Default Options

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE.md

Initialize the grid component with default options, such as setting it to be resizable.

```javascript
N([]).grid({ resizeable: true });
```

--------------------------------

### N.select Common Code Data Binding Filter Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TEMPLATE.md

Provide a filter function to process and bind common code data for N.select. This example removes duplicates and sorts data by 'age'.

```javascript
"filter" : function (data) {
    // Process the original data and return the processed data for binding.
    return N(N.array.deduplicate(data, "age")).datasort("age"); // Remove duplicates and sort.
}
```

--------------------------------

### Enable/Disable Tab Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tab.md

Enable or disable a specific tab by its index.

```javascript
tab.disable(2);  // Disables the third tab
tab.enable(2);   // Enables the third tab
```

--------------------------------

### N.locale([locale])

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Gets or sets the locale value for framework messages.

```APIDOC
## N.locale([locale])

### Description
Gets or sets the locale value set in the framework. The default messages of the framework are localized according to the set locale value. Pre-registered locale message sets are en_US and ko_KR, and can be modified in the message property of Config(natural.config.js). The default locale of the framework can be set with the N.context.attr("core").locale property in Config(natural.config.js).

### Parameters
#### Path Parameters
- **locale** (string) - Optional - Locale string such as "en_US", "ko_KR".

### Return
undefined
```

--------------------------------

### Apply Component-Provided Events

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-TEMPLATE.md

Example of binding a component-provided event, such as 'onSelect' for a date input.

```javascript
const cont = N(".page-id").cont({
    "e.dateInput.onSelect": (e, inputEle, selDate, isMonthonly, idx) => {
        e.preventDefault();
        N.log(selDate.obj.formatDate(selDate.format));
    }
});
```

--------------------------------

### Instantiate N.pagination with Constructor

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Pagination.md

Use the `new N.pagination()` constructor to create an instance. The first argument is the data, and the second is options or the context element.

```javascript
const pagination = new N.pagination(data, optsOrContext);
```

--------------------------------

### Initialize N.docs Constructor

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Documents.md

Instantiate the Documents component using the N.docs constructor. Requires a context element and an options object.

```javascript
const docs = new N.docs(context, opts);
```

--------------------------------

### Holiday Option Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Datepicker.md

Demonstrates how to configure the 'holiday' option for the Datepicker component, specifying recurring and one-time holidays.

```APIDOC
### Example: Setting the holiday option

The holiday option can be set as follows:

```javascript
{
  repeat: {
    "0619": "Holiday1",
    "0620": "Holiday3",
    "0621": ["Holiday6", "Holiday7"],
    "0622": ["Holiday9", "Holiday10"]
  },
  once: {
    "20200619": "Holiday2",
    "20200620": ["Holiday4", "Holiday5"],
    "20200621": "Holiday8",
    "20200622": ["Holiday11", "Holiday12"]
  }
}
```

- Use the repeat object for holidays that repeat every year (exclude the year).
- Use the once object for holidays that do not repeat every year (use the full date: year, month, day).
- If there are multiple holidays on the same date, use an array of names.

If you set the N.context.attr("ui").datepicker.holiday property in [Config(natural.config.js)](https://bbalganjjm.github.io/natural_js/?page=html/naturaljs/refr/refr0102.html), it will apply to all Datepickers.

```javascript
N.comm("getHolidayList.json").submit(data => {
  const 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 the class "Datepicker_holiday__".
```

--------------------------------

### Instantiate Grid Component

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE.md

Use N.grid() or N().grid() to instantiate the grid component. Ensure the correct arguments are passed.

```javascript
N.grid(argument[0]);
N().grid(argument[0]);
```

--------------------------------

### Unbinding and Rebinding Data Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Form.md

Demonstrates how to unbind existing data and rebind new data to the form component.

```APIDOC
### 4. Unbinding and Rebinding Data

```javascript
// Create Form instance with data
const form = N(data).form("#form-example", {
    unbind: true // Enable unbind feature
}).bind();
// Unbind
form.unbind();
// Rebind with new data
const newData = [{
    name: "Lee Young-hee",
    email: "lee@example.com",
    age: 28
}];
form.bind(0, newData);
```
```

--------------------------------

### N.string.startsWith(context, str)

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Checks if a string begins with a specified prefix.

```APIDOC
## N.string.startsWith(context, str)

### Description
Returns true if the input string starts with the given string.

### Parameters
#### Path Parameters
- **context** (string) - Required - The string to check.
- **str** (string) - Required - The string to search for.

### Return
boolean
```

--------------------------------

### Initialize Components and Execute Init Function

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

After automatically initializing button, form, list, and grid components on a loaded page, this code executes the main init function and retrieves component instances.

```javascript
N.context.attr("architecture", {
    ... 
    "cont" : {
        "advisors" : [ {
            "pointcut" : "^init$",
            "adviceType" : "around",
            "fn" : function(cont, fnChain, args, joinPoint){
                // 1. Initialize button components
                N(".button").button();

                // 2. Initialize form components
                N(".form", cont.view).each(function() {
                    N([]).form(this);
                })

                // 3. Initialize list components
                N(".list", cont.view).each(function() {
                    N([]).list(this);
                })

                // 4. Initialize grid components
                N(".grid", cont.view).each(function() {
                    N([]).grid(this);
                })

                // 5. Execute init function
                joinPoint.proceed();

                // 6. Afterwards, retrieve each component instance from the context as needed
                var grid01 = N("#grid01", cont.view).instance("grid");
                grid01.bind([]);
            }
        } ]
    }, 
    ...
}

```

--------------------------------

### Binding Data to Pagination

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Pagination.md

Example of binding data to the pagination component and setting up an `onChange` handler to log the selected data.

```APIDOC
## Usage Examples

### 1. Binding Data to Pagination

#### Description
This example demonstrates how to bind data to the pagination component. It fetches data, initializes the pagination, and sets up an `onChange` event to log the selected data. The `bind()` method is called to render the pagination controls.

#### HTML
```html
<div class="pagination">
    <ul>
        <li><a href="#" title="First Page">first</a></li>
        <li><a href="#" title="Previous Page">prev</a></li>
    </ul>
    <ul>
        <li><a href="#"><span>1</span></a></li>
    </ul>
    <ul>
        <li><a href="#" title="Next Page">next</a></li>
        <li><a href="#" title="Last Page">last</a></li>
    </ul>
</div>
```

#### JavaScript
```javascript
N.comm("data.json").submit(data => {
    N(data).pagination({
        context: ".pagination",
        onChange: (pageNo, selEle, selData, currPageNavInfo) => {
            N.log(selData);
        }
    }).bind();
});
```
```

--------------------------------

### Get context element

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tree.md

Retrieve the jQuery object representing the context element where the tree is rendered using the `context()` method.

```javascript
tree.context();
```

--------------------------------

### Declarative Options using data-opts

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Button.md

Demonstrates how to configure N.button options directly in HTML using the `data-opts` attribute.

```APIDOC
## Declarative Options

You can specify options declaratively using the `data-opts` attribute directly on the HTML element. This allows you to configure buttons with only HTML markup, without specifying options in JavaScript.

```html
<!-- Declarative options example -->
<a class="button" data-opts='{ "size": "large", "color": "primary", "type": "filled" }'>Large Button</a>
<button class="button" data-opts='{ "size": "small", "color": "secondary", "type": "outlined" }'>Small Button</button>
<input type="button" class="button" value="Disabled Button" data-opts='{ "disable": true }'>
```

Then, initialize the buttons in JavaScript:

```javascript
// Initialize buttons using declarative options in HTML
N("a.button, button.button, input.button").button();
```
```

--------------------------------

### Initialize and Manage N.docs Application Shell

Source: https://context7.com/bbalganjjm/natural_js/llms.txt

Manages multiple pages as tabs (MDI) or a single page view (SDI). Use for building applications with a tabbed interface or single-page layouts.

```javascript
// Initialize the application shell
const docs = N("#app-shell").docs({
    multi: true,         // MDI (tabbed) mode; false = SDI
    maxTabs: 10,
    maxStateful: 5,      // keep state of up to 5 inactive tabs
    tabScroll: true,
    entireLoadIndicator: true,
    entireLoadScreenBlock: true,

    onLoad(docId) {
        const cont = this.cont(docId);
        console.log("Loaded page:", docId, cont);
    },
    onActive(docId) {
        console.log("Tab activated:", docId);
    }
});

// Open a new tab
docs.add({
    url: "pages/employee-list.html",
    title: "Employee List",
    docId: "empList"
});

// Open a detail tab and pass parameters
docs.add({
    url: "pages/employee-detail.html",
    title: "Employee Detail",
    docId: "empDetail"
});
const detailCont = docs.cont("empDetail");
detailCont.request.attr("employeeId", 42);

// Activate an existing tab
docs.active("empList");

// Reload a tab
docs.reload("empDetail");

// Get active tab info
const active = docs.getActiveTab();
console.log(active.docId, active.title);

// Remove a tab
docs.remove("empList");
```

--------------------------------

### Create N.list Instance

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-List.md

Instantiates the List component with data and options or a context element. The data is a JSON object array, and opts|context can be an object, selector string, or context element.

```javascript
var list = new N.list(data, opts|context);
```

```javascript
var list = N(data).list(opts|context);
```

--------------------------------

### Manage Document Request Parameters

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Documents.md

Utilize the Document.request object to set and get parameters for a document. This is useful for passing data between documents.

```javascript
// Set a parameter
request.attr('paramName', 'value');
```

```javascript
// Get a parameter
const value = request.attr('paramName');
```

--------------------------------

### Check if a string starts with a substring with N.string.startsWith

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Returns true if the 'context' string begins with the 'str' substring. Both parameters must be strings.

```javascript
N.string.startsWith(context, str);
```

--------------------------------

### Create Main Index Page (HTML)

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-GETTINGSTARTED.md

This HTML structure sets up the main index page for a Natural-JS SPA. It includes necessary script and style imports, defines layout elements, and initializes the N.docs component upon document ready.

```html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>Natural-JS</title>
<script type="text/javascript" src="js/natural_js/lib/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/natural_js/css/natural.ui.css" />
<script type="text/javascript" src="js/natural_js/natural.js.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/natural_js/natural.config.js" charset="utf-8"></script>

<style type="text/css">
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    margin: 0;
    height: 100%;
}

#lefter {
    flex: 1;
    max-width: 200px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    height: 100%;
}

#docs {
    flex: 1;
    height: 100%;
}
</style>

<script type="text/javascript">
    // Global N.docs instance.
    window.docs;

    $(document).ready(function() {
        // Import left menu page.
        N("#lefter").comm("html/index/lefter.html").submit(function() {
            // Create new N.docs instance;
            docs = N("#docs").docs();
        });

    });
</script>
</head>
<body>
    <!-- lefter -->
    <div id="lefter"></div>
    <!-- N.docs context element. -->
    <div id="docs"></div>
</body>
</html>
```

--------------------------------

### Create N.formatter Instance with Rules

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Instantiate N.formatter with a data set and a rules object for column-specific formatting.

```javascript
var formatter = new N.formatter(data, rules|context);
```

```javascript
new N.formatter(data, {
    "numeric": [["trimtoempty"], ["numeric", "#,###.##0000"]],
    "generic": [["trimtoempty"], ["generic", "@@ABCD"]],
    "limit": [["trimtoempty"], ["limit", "13", "..." ]],
    "etc": [["date", 12]]
}).format();
```

--------------------------------

### Modifying and Reverting Data Example

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Form.md

Illustrates how to modify form data using the `val` method and revert changes using the `revert` method.

```APIDOC
### 3. Modifying and Reverting Data

```javascript
// Create Form instance with data
const form = N(data).form("#form-example", {
    revert: true // Enable revert feature
}).bind();
// Modify data
form.val("name", "Kim Cheol-su");
form.val("age", 25);
// Revert to original data
form.revert();
```
```

--------------------------------

### Get elements within context

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tree.md

Query for specific elements within the tree's context by passing a selector string to the `context()` method.

```javascript
tree.context('.some-element');
```

--------------------------------

### Initialize N.select with Server Data

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-GETTINGSTARTED.md

Initialize N.select components with empty data and then bind data fetched from a server. Specify 'key' and 'val' properties if they differ from 'key' and 'val' in the data.

```javascript
initComponents : function() {
   cont.eyeColor = N([]).select({
        context : N("#eyeColor", cont.view),
        key : "codeName", // Property name for option tag text
        val : "codeValue" // Property name for option tag value
    });
   cont.gender = N([]).select({
        context : N("#gender", cont.view),
        key : "codeName",
        val : "codeValue"
    });

   N.comm("data/url.json").submit(function(data) {
           cont.eyeColor.bind(data["eyeColorList"]);
      cont.gender.bind(data["genderList"]);
   })
}
```

--------------------------------

### Get original data as jQuery object

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tree.md

Access the original data bound to the tree component as a jQuery object by calling `data(false)`.

```javascript
tree.data(false);
```

--------------------------------

### Declarative Button Options

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Button.md

Configure button styles and behavior directly in HTML using the 'data-opts' attribute. This allows for HTML-only button setup.

```html
<a class="button" data-opts='{ "size": "large", "color": "primary", "type": "filled" }'>Large Button</a>
<button class="button" data-opts='{ "size": "small", "color": "secondary", "type": "outlined" }'>Small Button</button>
<input type="button" class="button" value="Disabled Button" data-opts='{ "disable": true }'>
```

--------------------------------

### Sending Parameters

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

Demonstrates how to send parameters to the server along with the request.

```APIDOC
## Sending Parameters

### Description
Send parameters to the server and retrieve result data.

### Request Example
```javascript
N({ "param1": 1, "param2": "Mark" }).comm("data.json").submit(function(data) {
    N.log(data);
});
```
```

--------------------------------

### Example: Filtering Data with jQuery Plugin

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-DATA.md

Shows how to use the datafilter jQuery plugin to filter an array of user objects based on their active status.

```javascript
const activeUsersJQuery = N(users).datafilter(user => user.active === true);
// Result: jQuery object containing [{ id: 1, name: "John", age: 28, active: true }, { id: 3, name: "Sarah", age: 25, active: true }, { id: 4, name: "David", age: 35, active: true }]
```

--------------------------------

### Load External Page as Popup

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Popup.md

Shows how to create a popup by loading content from an external HTML file. The popup is then opened.

```javascript
const popup = N().popup("page.html");
popup.open();
```

--------------------------------

### Initialize Declarative Buttons

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Button.md

Select elements with the 'button-context' class and call the .button() method to initialize them with options defined in their 'data-opts' attributes.

```javascript
N(".button-container .button-context").button();
```

--------------------------------

### Initialize Buttons with Declarative Options

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Button.md

After defining buttons with 'data-opts' in HTML, initialize them using the N().button() method with appropriate selectors.

```javascript
N("a.button, button.button, input.button").button();
```

--------------------------------

### Declarative Validation Rules

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Grid.md

Apply validation rules to an input element using the 'data-validate' attribute. This example enforces that the input must be present and an integer.

```html
<input id="age" type="text" data-validate='["required"], ["integer"]'>
```

--------------------------------

### Initialize Tab Component with Constructor

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tab.md

Instantiate the Tab component using the `new N.tab()` constructor. The first argument is the context element, and the second is an options object.

```javascript
const tab = new N.tab(context, opts);
```

--------------------------------

### Pagination Initialization and Data Binding

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Pagination.md

Demonstrates how to initialize the pagination component, fetch total count, and bind data. The onChange event handler is used to retrieve paged data when the page changes.

```APIDOC
## Initialization and Data Binding

### Description
This example shows how to initialize the pagination component. It first fetches the total count of items from the server, then initializes the pagination with this count. The `onChange` event handler is set up to fetch paged data and bind it to a grid component whenever the page selection changes.

### Method
```javascript
const grid = N(data).grid(".grid-context");

N.comm("getTotalCnt.json").submit(data => {
    N(data).pagination({
        context: ".pagination-context",
        totalCount: data.totalCount,
        onChange: (pageNo, selEle, selData, currPageNavInfo) => {
            N(currPageNavInfo).comm("getPagedDataList.json").submit(data => {
                grid.bind(selData);
            });
        }
    }).bind();
});
```

### Usage Example
```html
<div class="pagination-context"></div>
<div class="grid-context"></div>
```
```

--------------------------------

### Get Specific Instance by ID with .instance() Callback

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Retrieve a specific instance by its instanceId and pass it to a callback function. The callback receives the found instance.

```javascript
$("#element").instance("instanceName", function(instance) {
  // Handle instance
});
```

--------------------------------

### Initialize Controller with N.cont

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-ARCHITECTURE.md

Initializes and returns a Controller object, registering it for management. The init function within the ControllerObject is executed after the view is loaded, receiving the view element and a Communicator.request object.

```javascript
var controllerObject = N.cont(N(view), ControllerObject);
```

--------------------------------

### Datepicker Methods Usage

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Datepicker.md

Demonstrates the usage of context, show, and hide methods for interacting with the Datepicker instance.

```javascript
datepicker.context([selector]);
datepicker.show();
datepicker.hide();
```

--------------------------------

### Get Component Instance with .instance()

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-CORE.md

Retrieve the instance of a component or controller object associated with a DOM element. This is useful for interacting with initialized UI components.

```javascript
$("#element").instance();
```

--------------------------------

### Declarative Button Initialization

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Button.md

Initialize buttons using HTML markup by adding a 'data-opts' attribute to elements. The attribute should contain a JSON string of options.

```html
<div class="button-container">
    <a href="#" class="button-context" data-opts='{ "size": "large", "color": "primary", "type": "filled" }'>Large Button</a>
    <button class="button-context" data-opts='{ "size": "medium", "color": "secondary", "type": "outlined" }'>Medium Button</button>
    <input type="button" value="Small Button" class="button-context" data-opts='{ "size": "small", "color": "tertiary", "type": "elevated" }'>
</div>
```

--------------------------------

### Get Tab Controller

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tab.md

Retrieve the Controller object for a specific tab using its index. This allows for further interaction with the tab's content or associated logic.

```javascript
const controller = tab.cont(0); // Gets the Controller for the first tab
```

--------------------------------

### Main Methods

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI.Shell-Documents.md

Core methods for managing documents (tabs/pages) within the shell.

```APIDOC
## Main Methods

### Description
These are the primary methods for interacting with and managing documents (tabs/pages) in the shell.

### Methods
- **add(options)**: Adds a new document (tab/page) with the specified options.
- **remove(docId)**: Removes the document with the given ID.
- **active(docId)**: Activates the document (tab/page) with the given ID.
- **doc(docId)**: Returns information about the document with the given ID.
- **cont(docId)**: Returns the Controller object for the document with the given ID.
```

--------------------------------

### Get all data as array

Source: https://github.com/bbalganjjm/natural_js/blob/master/docs/DEVELOPER-GUIDE-UI-Tree.md

Retrieve all data currently bound to the tree component as an array of JSON objects by calling the `data()` method without arguments.

```javascript
tree.data();
```