### Angular: Setup InputManJS Integration

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_angular

Steps to create a new Angular application and integrate InputManJS controls. This involves creating the Angular project, navigating into the directory, installing the InputManJS Angular package, configuring global styles and modules, defining component data, and rendering the component in the template. Finally, it covers starting the application.

```bash
ng new my-angular-app
cd my-angular-app
npm install @grapecity/wijmo.angular2.input
```

```css
/* src/styles.css */
@import "~@grapecity/wijmo.styles/wijmo.css";
@import "~@grapecity/wijmo.angular2.input/styles/wijmo.angular2.input.css";
```

```typescript
// src/app/app.module.ts
import {
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  FormsModule
} from '@angular/forms';
import {
  WjInputModule
} from '@grapecity/wijmo.angular2.input';

import {
  AppComponent
} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    WjInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}) export class AppModule {}
```

```typescript
// src/app/app.component.ts
import {
  Component
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
}) export class AppComponent {
  title = 'InputManJS Angular Demo';
  selectedValue: string = 'Option 1';
}
```

```html
<!-- src/app/app.component.html -->
<h1>{{ title }}</h1>

<label for="combo">Select an option:</label>
<wj-combo-box
  [itemsSource]="['Option 1', 'Option 2', 'Option 3']"
  [(selectedValue)]="selectedValue"
  [displayMemberPath]="'value'"
  [selectedValuePath]="'value'">
</wj-combo-box>

<p>Selected: {{ selectedValue }}</p>
```

```bash
ng serve -o
```

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

### Create Next.js Application

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_nextjs

Command to create a new Next.js application. This example assumes TypeScript is enabled during setup.

```bash
npx create-next-app@latest

```

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

### Run Nuxt.js Development Server

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_nuxtjs

Command to start the Nuxt.js development server. After running this, you can access the application in your browser at `http://localhost:3000/`.

```bash
npm run dev

```

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

### Run Next.js Application

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_nextjs

Command to start the Next.js development server. After running this, the application can be accessed via a web browser.

```bash
npm run dev

```

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

### Vue.js Setup for InputManJS Controls

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_vue

Steps to create a new Vue.js application, install the InputManJS Vue package, configure the main App.vue file to import components and styles, and run the application. This process requires Node.js and Vue CLI to be pre-installed.

```bash
vue create my-inputmanjs-app
cd my-inputmanjs-app
npm install @mescius/inputmanjs-vue
```

```javascript
// src/App.vue
<template>
  <div id="app">
    <!-- InputManJS components will be used here -->
    <p>InputManJS Vue App</p>
  </div>
</template>

<script>
// Import InputManJS components and styles as needed
// import '@mescius/inputmanjs-vue/dist/style.css'; // Example import

export default {
  name: 'App',
  components: {
    // Register InputManJS components here
  },
  data() {
    return {
      // Define data for InputManJS components
    };
  },
  mounted() {
    // Initialize InputManJS components or set up data binding
  }
};
</script>

<style>
/* Global styles or component-specific styles */
</style>
```

```bash
npm run serve
```

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

### Application Entry Point (JavaScript)

Source: https://demo.mescius.jp/inputmanjs/demos/examples/userInfo

Initiates the application by importing the main module './src/app' using SystemJS when the window loads.

```JavaScript
window.onload = function() {
System.import('./src/app');
}
```

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

### HTML Structure for Shortcut Demo

Source: https://demo.mescius.jp/inputmanjs/demos/shortcut/action

Provides the HTML markup for the demonstration page, including meta tags, script includes for SystemJS, and a layout with various input controls (text, mask, number, date-time, calendar, combo) and a table explaining shortcut key mappings.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ショートカットコントロール - アクション</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div class="flexbox">
<div>
テキストコントロール<br>
<input id="gcTextBox">
</div>
<div>
マスクコントロール<br>
<input id="gcMask">
</div>
<div>
数値コントロール<br>
<input id="gcNumber">
</div>
<div>
日付時刻コントロール<br>
<input id="gcDateTime">
</div>
<div>
カレンダーコントロール<br>
<div id="gcCalendar"></div>
</div>
<div>
コンボコントロール<br>
<select id="gcComboBox"></select>
</div>
<div>
標準の入力要素<br>
<input id="text" value="テキスト">
</div>
</div>
<table class="sample">
<tr>
<th>キー</th>
<th>アクション</th>
<th>対象のコントロール</th>
</tr>
<tr>
<td>V</td>
<td>現在の値を表示します。これはカスタムアクションです。</td>
<td>全コントロール</td>
</tr>
<tr>
<td>P</td>
<td>前のフィールドまたはコントロールにフォーカスを移動します。</td>
<td>全コントロール</td>
</tr>
<tr>
<td>N</td>
<td>次のフィールドまたはコントロールにフォーカスを移動します。</td>
<td>全コントロール</td>
</tr>
<tr>
<td>C</td>
<td>値をクリアします。</td>
<td>標準入力要素以外の全コントロール</td>
</tr>
<tr>
<td>R</td>
<td>ドロップダウンを開きます。</td>
<td>数値、日付時刻、コンボ</td>
</tr>
<tr>
<td>U</td>
<td>上方向のスピン操作を行います。</td>
<td>マスク、数値、日付時刻、コンボ</td>
</tr>
<tr>
<td>D</td>
<td>下方向のスピン操作を行います。</td>
<td>マスク、数値、日付時刻、コンボ</td>
</tr>
<tr>
<td>Z</td>
<td>現在のカーソル位置に000を挿入します。</td>
<td>数値</td>
</tr>
<tr>
<td>W</td>
<td>現在の日時を設定します。</td>
<td>日付時刻、カレンダー</td>
</tr>
</table>
</body>
</html>
```

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

### Install InputManJS React Package

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_nextjs

Installs the InputManJS React package using npm, which is required to use InputManJS controls within a React/Next.js application.

```bash
npm install @mescius/inputman.react

```

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

### InputManJS JavaScript Setup and Control Instantiation

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_javascript

Demonstrates importing InputManJS CSS and JavaScript files, setting global appearance styles, and instantiating various InputManJS controls with specific options. This includes GcTextBox, GcMultiLineTextBox, GcMask, GcDateTime, GcNumber, GcCalendar, GcComboBox, GcListBox, GcTagBox, and GcRichTextEditor.

```javascript
import '@mescius/inputman/CSS/gc.inputman-js.css';
import '@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css';
import { InputMan } from '@mescius/inputman';
import * as GcRichtexteditor from '@mescius/inputman.richtexteditor';
import "@mescius/inputman.richtexteditor/JS/plugins/all";

InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;

const gcTextBox = new InputMan.GcTextBox(document.getElementById('gcTextBox'), {
    text: 'テキスト'
});

const gcMultiLineTextBox = new InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox'), {
    width: 175,
    height: 150,
    text: 'テキスト'
});

const gcMask = new InputMan.GcMask(document.getElementById('gcMask'), {
    formatPattern: '〒\D{3}-\D{4}',
    value: '9813205'
});

const gcDateTime = new InputMan.GcDateTime(document.getElementById('gcDateTime'), {
    value: new Date(2020, 0, 1)
});

const gcNumber = new InputMan.GcNumber(document.getElementById('gcNumber'), {
    value: 1
});

const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'), {
    selectedDate: new Date(2020, 0, 1),
    focusDate: new Date(2020, 0, 1)
});

const gcComboBox = new InputMan.GcComboBox(document.getElementById('gcComboBox'), {
    items: ['項目1', '項目2', '項目3', '項目4', '項目5']
});
gcComboBox.selectedIndex = 0;

const gcListBox = new InputMan.GcListBox(document.getElementById('gcListBox'), {
    items: ['項目1', '項目2', '項目3', '項目4', '項目5'],
    selectedIndex: 0
});
gcListBox.selectedIndex = 0;

const gcTagbox = new InputMan.GcTagBox(document.getElementById('gcTagbox'), {
    items: ['項目1', '項目2', '項目3', '項目4', '項目5']
});

const gcRichTextEditor = new GcRichtexteditor.InputMan.GcRichTextEditor(
    document.getElementById("gcRichTextEditor"),
    {
        plugins: [GcRichtexteditor.InputMan.GcRichTextEditorPluginItem.All],
        width: 550,
        height: 150,
        menubar: null,
    }
);
```

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

### Install InputManJS Vue Package

Source: https://demo.mescius.jp/inputmanjs/demos/quickStart/qs_nuxtjs

Command to install the InputManJS Vue package using npm. This makes the InputManJS Vue components available for use in your Nuxt.js application.

```bash
npm install @mescius/inputman.vue
```

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

### InputMan GcValidator Setup

Source: https://demo.mescius.jp/inputmanjs/demos/examples/comment/projectManagement

GcValidatorを使用して、リッチテキストエディタの入力フィールドにバリデーションルールを適用します。必須項目チェックとカスタムエラーメッセージを設定し、手動検証をトリガーします。エラー通知のスタイルも定義されています。

```javascript
const gcRichTextEditorValidator = new GcCommon.InputMan.GcValidator({
  items: [
    {
      control: rich,
      ruleSet: [
        {
          rule: GcCommon.InputMan.ValidateType.Required,
          failMessage: (control) => `詳細を入力するか、テンプレートより挿入してください。`,
        }
      ],
      validateWhen: GcCommon.InputMan.ValidateWhen.Manual,
    }
  ],
  defaultNotify: {
    fail: {
      toast: {
        title: '課題内容が必須です。',
        position: GcCommon.InputMan.ToastPosition.TopCenter,
        duration: 3,
        showProgress: false,
        showClose: false,
        pauseOnHover: false,
      },
    },
  }
});
```

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

### SystemJS Configuration for InputMan Demo

Source: https://demo.mescius.jp/inputmanjs/demos/dateTime/overview

This configuration file sets up SystemJS for loading modules in the demo. It specifies the transpiler, Babel options, CSS loading, and maps npm packages like @mescius/inputman to their respective locations. This enables the application to load and run correctly.

```json
{
  "transpiler": "plugin-babel",
  "babelOptions": {
    "es2015": true
  },
  "meta": {
    "*.css": { "loader": "css" }
  },
  "paths": {
    // paths serve as alias
    "npm:": "node_modules/"
  },
  // map tells the System loader where to look for things
  "map": {
    "@mescius/inputman": "npm:@mescius/inputman/index.js",
    "@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
    "@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
    "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
    "@mescius/inputman.richtexteditor/JS/plugins/advlist": "npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/all": "npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/autosave": "npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/charmap": "npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/directionality": "npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/emoticons": "npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/fullscreen": "npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/htmlcode": "npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/image": "npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/link": "npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/lists": "npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/media": "npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/pagebreak": "npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/preview": "npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/save": "npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/searchreplace": "npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/table": "npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js"
  }
}
```

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

### SystemJS Configuration and App Initialization

Source: https://demo.mescius.jp/inputmanjs/demos/dateTime/focus

Configures the SystemJS module loader with transpilation settings, meta information for CSS, and module path mappings. It then imports the main application script './src/app' when the window has finished loading.

```javascript
window.onload = function() {
  System.import('./src/app');
}

System.config({
  transpiler: 'plugin-babel',
  babelOptions: {
    es2015: true
  },
  meta: {
    '*.css': { loader: 'css' }
  },
  paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
    '@mescius/inputman': 'npm:@mescius/inputman/index.js',
    '@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
    '@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
    "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
    '@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
    '@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
    '@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
    '@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
    '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
    '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
    '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
    '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
    '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
    '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
    '@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
    '@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
    'css': 'npm:systemjs-plugin-css/css.js',
    'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
    'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    src: {
      defaultExtension: 'js'
    },
    "node_modules": {
      defaultExtension: 'js'
    }
  }
});
```

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

### InputMan.js Input Range Validation Setup

Source: https://demo.mescius.jp/inputmanjs/demos/validator/rules/buildin/outOfRange

このJavaScriptコードは、InputMan.jsライブラリを使用して数値 (`GcNumber`) および日付時刻 (`GcDateTime`) コントロールに範囲外検証を設定する方法を示しています。`minValue`, `maxValue`, `minDate`, `maxDate`, `maxMinBehavior` プロパティの設定と、`GcValidator` を使用した検証ルールの適用方法が含まれます。

```javascript
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcNumber1 = new InputMan.GcNumber(document.getElementById('gcNumber1'), {
  minValue: 1,
  maxValue: 100,
  maxMinBehavior: InputMan.MaxMinBehavior.Keep,
});
gcNumber1.setValue(-1);
const gcDateTime1 = new InputMan.GcDateTime(document.getElementById('gcDateTime1'), {
  displayFormatPattern: 'yyyy年M月d日',
  formatPattern: 'yyyy年M月d日',
  value: new Date(2024, 9, 10),
  minDate: new Date(2024, 10, 1),
  maxDate: new Date(2024, 10, 30),
  maxMinBehavior: InputMan.MaxMinBehavior.Keep,
});
const validator = new InputMan.GcValidator({
  items: [
    // 正数のみ入力可
    {
      control: gcNumber1,
      ruleSet: [
        {
          // 検証規則を「範囲チェック」とする
          rule: InputMan.ValidateType.OutOfRange,
          failMessage: '正数を入力してください'
        }
      ]
    },
    // 2024年11月1日～2024年11月30日のみ入力可
    {
      control: gcDateTime1,
      ruleSet: [
        {
          // 検証規則を「範囲チェック」とする
          rule: InputMan.ValidateType.OutOfRange,
          failMessage: '日付が範囲外です'
        }
      ],
      notify:
      {
        tip: true
      }
    }
  ],
  defaultNotify: {
    tip: true
  }
});
validator.validate();
```

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

### SystemJS Configuration for InputMan Demo

Source: https://demo.mescius.jp/inputmanjs/demos/dateTime/format

This JSON configuration file sets up the SystemJS module loader for the project. It specifies the transpiler, Babel options, CSS loading, module paths, and maps npm packages like '@mescius/inputman' to their respective locations.

```json
{
  "transpiler": "plugin-babel",
  "babelOptions": {
    "es2015": true
  },
  "meta": {
    "*.css": { "loader": "css" }
  },
  "paths": {
    // paths serve as alias
    "npm:": "node_modules/"
  },
  // map tells the System loader where to look for things
  "map": {
    "@mescius/inputman": "npm:@mescius/inputman/index.js",
    "@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
    "@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
    "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
    "@mescius/inputman.richtexteditor/JS/plugins/advlist": "npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/all": "npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/autosave": "npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/charmap": "npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js",
    "@mescius/inputman.richtexteditor/JS/plugins/directionality": "npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js"
  }
}

```

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

### SystemJS Configuration

Source: https://demo.mescius.jp/inputmanjs/demos/calendar/selection

Configures SystemJS, a JavaScript module loader. It specifies the transpiler to be 'plugin-babel' and provides associated Babel options, indicating a setup for modern JavaScript development with transpilation.

```JavaScript
System.config({
transpiler: 'plugin-babel',
babelOptions: {

```

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

### SystemJS Configuration for InputMan Demo

Source: https://demo.mescius.jp/inputmanjs/demos/listBox/multiColumn

Configures SystemJS for loading modules, including transpilation with Babel for ES2015 support and CSS loading. This setup is essential for running the `@mescius/inputman` library and its dependencies.

```javascript
System.config({
  transpiler: 'plugin-babel',
  babelOptions: {
    es2015: true
  },
  meta: {
    '*.css': { loader: 'css' }
  },
  paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
    '@mescius/inputman': 'npm:@mescius/inputman/index.js',
    '@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
    '@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
    "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
    '@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
  }
});
```

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

### SystemJS Configuration

Source: https://demo.mescius.jp/inputmanjs/demos/comment/copylink/pastetype/card

This JSON configuration file sets up SystemJS for module loading, specifying the transpiler, Babel options, meta information for CSS files, and module paths/aliases for the @mescius libraries.

```json
{
    "transpiler": "plugin-babel",
    "babelOptions": {
        "es2015": true
    },
    "meta": {
        "*.css": { "loader": "css" }
    },
    "paths": {
        // paths serve as alias
        "npm:": "node_modules/"
    },
    // map tells the System loader where to look for things
    "map": {
        "@mescius/inputman": "npm:@mescius/inputman/index.js",
        "@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
        "@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
        "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
        "@mescius/inputman.richtexteditor/JS/plugins/advlist": "npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/all": "npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/autosave": "npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/charmap": "npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/directionality": "npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/emoticons": "npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/fullscreen": "npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/htmlcode": "npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js",
        "@mescius/inputman.richtexteditor/JS/plugins/image": "npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js"
    }
}
```

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

### SystemJS Configuration for InputMan.js

Source: https://demo.mescius.jp/inputmanjs/demos/calendar/overview

Shows the SystemJS configuration file content, which is crucial for loading modules, including the '@mescius/inputman' library and its CSS. It sets up the transpiler, meta options for CSS loading, and path mappings for npm modules.

```javascript
System.config({
  transpiler: 'plugin-babel',
  babelOptions: {
    es2015: true
  },
  meta: {
    '*.css': { loader: 'css' }
  },
  paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
    '@mescius/inputman': 'npm:@mescius/inputman/index.js',
    '@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
    '@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
    "@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
    '@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
    '@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js'
  }
});
```