@fmsim/fmsim-restful 1.0.61 → 1.0.63

package/dist-app/fmsim/scene-viewer.js.LICENSE.txt

@@ -0,0 +1,171 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * @fileoverview
+ * @suppress {checkPrototypalTypes}
+ * @license Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt The complete set of authors may be found
+ * at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
+ * be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
+ * Google as part of the polymer project is also subject to an additional IP
+ * rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-LIcense-Identifier: Apache-2.0
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/**
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/

package/dist-app/fmsim/theme.css

@@ -0,0 +1,15 @@
+body{--header-bar-background-color: var(--theme-white-color);--header-bar-icon-size: var(--icon-default-size);--header-bar-title: bold 16px var(--theme-font);--header-bar-color: #fff;--header-bar-height: 45px;--header-bar-item-padding: 0px 5px 0 0;--nav-bar-background-color: #fff;--group-bar-background-color: var(--theme-white-color);--group-bar-textbutton: 16px/32px var(--theme-font);--group-bar-textbutton-active: bold var(--group-bar-textbutton);--group-bar-active-line-color: var(--focus-color);--group-bar-line: solid 3px rgba(0, 0, 0, 0.2);--aside-background-color: var(--secondary-background-color);--aside-list-textbtton: 18px var(--theme-font);--aside-list-icon: var(--icon-default-size);--aside-list-bottom-line: var(--border-dark-color);--aside-list-detail-background-color: #fff;--aside-list-detail-text: 14px var(--primary-background-color);--footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);--button-container-margin: inintial;--button-container-padding: 0 0 12px 0;--button-container-background: transparent;--button-container-height: initial;--button-container-align: center;--button-container-button-background-color: var(--secondary-color);--button-container-button-border-radius: var(--button-border-radius);--button-container-button-margin: var(--button-margin);--button-container-button-font: var(--button-font);--button-container-button-height: initial;--button-container-button-border: var(--button-border);--popup-content-background-color: var(--main-section-background-color);--popup-content-padding: 10px 20px;--overlay-center-small-width: 30%;--overlay-center-small-height: 30%;--overlay-center-normal-width: 50%;--overlay-center-normal-height: 50%;--overlay-center-large-width: 75%;--overlay-center-large-height: 75%;--overlay-header-height: var(--header-bar-height);--overlay-header-background-color: var(--primary-color);--overlay-header-color: #fff;--overlay-header-font: var(--header-bar-title);--overlay-background-color: rgba(0, 0, 0, 0.5);--overlay-margin-bottom: 0px;--splitter-background-color: rgba(0, 0, 0, 0.1);--splitter-hover-background-color: var(--primary-color)}@media only screen and (max-width: 460px){body{--button-container-margin: 0 -15px;--button-container-padding: 0 0 0 0;--button-container-background: #586272;--button-container-height: 50px;--button-container-align: right;--button-container-button-background-color: transparent;--button-container-button-border-radius: 0;--button-container-button-margin: 0;--button-container-button-font: normal 17px var(--theme-font);--button-container-button-height: 50px;--button-container-button-border: 1px solid rgba(0, 0, 0, 0.1);--overlay-center-small-width: 100%;--overlay-center-small-height: 100%;--overlay-center-normal-width: 100%;--overlay-center-normal-height: 100%;--overlay-center-large-width: 100%;--overlay-center-large-height: 100%}}@media(min-width: 461px)and (max-width: 1024px){body{--overlay-center-small-width: 40%;--overlay-center-small-height: 40%;--overlay-center-normal-width: 60%;--overlay-center-normal-height: 60%;--overlay-center-large-width: 80%;--overlay-center-large-height: 80%}}
+html,body{margin:0;padding:0;overflow:hidden;overscroll-behavior-y:none;line-height:1.5;-webkit-font-smoothing:antialiased;accent-color:var(--primary-color)}
+body{--grid-container-border-color: 1px solid rgba(0, 0, 0, 0.09);--grid-container-border-width: 1px 0;--grist-background-color: var(--main-section-background-color);--grist-padding: var(--padding-wide);--grist-title-margin: 0 0 0 10px;--grist-title-border: none;--grist-title-font: bold 16px var(--theme-font);--grist-title-color: var(--secondary-color);--grist-title-font: bold 16px var(--theme-font);--grist-title-icon-color: var(--primary-color);--grist-title-icon-margin: 0 3px 2px 0;--grist-title-icon-size: var(--fontsize-default);--grist-title-with-grid-padding: 0;--grist-object-editor-font: normal 1em var(--theme-font);--grist-object-editor-color: var(--secondary-color);--grist-input-zoom: 1;--grist-input-progress-border: 1px solid rgba(255, 255, 255, 0.5);--grist-input-progress-background: rgba(121, 110, 110, 0.1);--grist-input-progress-bar-background: #4ac5fd;--grist-input-progress-bar-color: var(--theme-white-color);--grid-header-background-color: transparent;--grid-header-top-border: 2px solid var(--secondary-color);--grid-header-bottom-border: var(--grid-container-border-color);--grid-header-border-color: rgba(var(--primary-color-rgb), 0.3);--grid-header-padding: var(--padding-default) 0 var(--padding-narrow) var(--padding-default);--grid-header-sorter-size: 18px;--grid-header-splitter-border: var(--grid-container-border-color);--grid-header-splitter-border-hover: 1px solid var(--primary-color);--grid-header-color: rgba(var(--secondary-color-rgb), 0.8);--grid-header-font: bold var(--fontsize-small) var(--theme-font);--grid-record-background-color: var(--theme-white-color);--grid-record-odd-background-color: #f9f7f5;--grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);--grid-record-color: var(--secondary-color);--grid-record-wide-fontsize: var(--fontsize-small);--grid-record-selected-background-color: var(--paper-light-green-50);--grid-record-selected-color: var(--grid-record-color);--grid-record-focused-background-color: var(--primary-color);--grid-record-focused-border: 1px solid var(--primary-color);--grid-record-focused-color: #fff;--grid-record-emphasized-background-color: var(--grid-record-selected-background-color);--grid-record-emphasized-color: var(--grid-record-selected-color);--grid-record-editing-background-color: var(--theme-white-color);--grid-record-editing-border: 1px dashed var(--paper-light-blue-200);--grid-record-fontsize: var(--fontsize-large);--grid-record-border-bottom: var(--grid-container-border-color);--grid-record-dirty-border-top: 24px solid var(--paper-green-a700);--grid-record-dirty-border-left: 24px solid transparent;--grid-record-dirty-icon-font: bold 10px/12px var(--mdc-icon-font, "Material Icons");--grid-record-dirty-icon-size: var(--fontsize-large);--grid-record-dirty-color: var(--theme-white-color);--grid-footer-background-color: transparent;--grid-footer-font-size: var(--fontsize-default);--grid-footer-color: var(--secondary-color);--grid-footer-limit-color: rgba(var(--secondary-color-rgb), 0.6);--grid-footer-inactive-color: var(--grid-footer-limit-color);--grid-footer-padding: var(--padding-default) var(--padding-narrow);--data-list-background-color: var(--main-section-background-color);--data-list-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);--data-list-item-padding: var(--padding-default) var(--padding-wide);--data-list-item-border-bottom: var(--grid-container-border-color);--data-list-item-name-font: bold 1em/1em var(--theme-font);--data-list-item-name-color: var(--secondary-color);--data-list-item-disc-font: normal 0.9em/1em var(--theme-font);--data-list-item-disc-color: var(--secondary-text-color);--data-list-item-etc-font: normal 0.8em/1em var(--theme-font);--data-list-item-etc-color: #585858;--data-list-item-icon-font: normal 1em/1em;--data-list-item-icon-color: var(--secondary-text-color);--data-list-selected-background-color: var(--grid-record-selected-background-color);--data-list-fab-position-horizontal: 15px;--data-list-fab-position-vertical: 15px;--data-list-fab-color: var(--primary-color);--data-list-fab-shadow: var(--box-shadow);--record-view-background-color: var(--main-section-background-color);--record-view-gap: var(--margin-narrow) 0;--record-view-padding: var(--padding-default);--record-view-label-font: bold 15px var(--theme-font);--record-view-label-color: var(--secondary-color);--record-view-label-icon-size: var(--fontsize-small);--record-view-font: normal 15px var(--theme-font);--record-view-color: var(--secondary-color);--record-view-focus-color: var(--primary-color);--record-view-border-bottom: 1px solid rgba(0, 0, 0, 0.1);--record-view-edit-border-bottom: 2px solid var(--primary-color);--record-view-item-padding: var(--padding-default);--record-view-footer-height: 36px;--record-view-footer-background: #586272;--record-view-footer-button-border: 1px solid rgba(0, 0, 0, 0.3);--record-view-footer-button-border-width: 0 0 0 1px;--record-view-footer-button-height: 36px;--record-view-footer-button-font: 17px;--record-view-footer-button-color: var(--theme-white-color);--record-view-footer-iconbutton-size: var(--fontsize-large);--record-view-footer-focus-background: var(--primary-color)}@media only screen and (max-width: 460px){body{--grist-padding: 0;--record-view-font: normal 15px/32px var(--theme-font);--record-view-footer-height: 50px;--record-view-footer-button-height: var(--record-view-footer-height);--record-view-footer-iconbutton-size: 35px;--record-view-footer-iconbutton-margin: -2px;--record-view-footer-iconbutton-display: block}}@media(min-width: 461px)and (max-width: 1024px){body{--grist-padding: 0;--record-view-footer-height: 50px;--record-view-footer-button-height: var(--record-view-footer-height);--record-view-footer-iconbutton-size: 35px;--record-view-footer-iconbutton-margin: -2px;--record-view-footer-iconbutton-display: block}}@media print{body{--grist-input-zoom: 0.7}}
+body{--form-border: none;--form-margin: var(--margin-wide);--form-max-width: 700px;--form-multi-column-max-width: 100%;--form-sublabel-font: normal 13px var(--theme-font);--form-sublabel-color: var(--secondary-color);--form-grid-gap: 12px 5px;--legend-padding: var(--padding-default) 0;--legend-font: bold 16px var(--theme-font);--legend-text-color: var(--secondary-text-color);--legend-border-bottom: 1px solid var(--primary-color);--label-padding: 3px 0;--label-font: normal 14px var(--theme-font);--label-color: var(--secondary-color);--input-field-border: 1px solid rgba(0, 0, 0, 0.2);--input-field-border-radius: var(--border-radius);--input-field-padding: 2px 9px;--input-field-font: normal 14px var(--theme-font);--search-panel-background-color: rgba(0, 0, 0, 0.1);--search-panel-search-iconbutton-size: var(--icon-default-size);--search-form-icon-color: var(--primary-color);--search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);--search-form-box-padding: 15px 30px 15px 15px;--search-form-background-color: #fff;--search-form-narrow-background-color: rgba(34, 166, 167, 0.9);--search-form-narrow-text-color: #fff;--file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);--file-uploader-background-color: var(--main-section-background-color);--file-uploader-font: normal 12px/20px var(--theme-font);--file-uploader-color: var(--secondary-color);--file-uploader-icon-color: var(--primary-color);--file-uploader-candrop-background-color: #fffde9;--file-uploader-label-padding: 3px 20px;--file-uploader-label-border-radius: var(--border-radius);--file-uploader-label-background-color: var(--secondary-color);--file-uploader-label-font: normal 12px var(--theme-font);--file-uploader-label-color: #fff;--file-uploader-li-padding: 2px 5px 0px 5px;--file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);--file-uploader-li-icon-margin: 2px 0 2px 5px;--file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, "Material Icons");--file-uploader-li-icon-focus-color: var(--primary-color)}@media screen and (max-width: 460px){body{--label-font: normal 15px var(--theme-font)}}@media(min-width: 461px)and (max-width: 1024px){body{--form-margin: 15px 0;--form-multi-column-max-width: 100%;--form-container-padding: 0 9px 12px 9px;--label-font: normal 14px var(--theme-font);--input-field-font: normal 15px var(--theme-font);--input-field-padding: 3px 5px}}@media only screen and (max-width: 925px){body{--form-margin: 14px 0;--form-multi-column-max-width: 100%;--form-container-padding: 0 9px 12px 9px;--input-field-padding: 3px 5px}}
+body{--board-renderer-border: 1px solid rgba(0, 0, 0, 0.1);--board-renderer-max-width: 120px;--board-renderer-name-background-color: var(--secondary-text-color);--board-renderer-name-font: normal 13px var(--theme-font);--board-renderer-icon-size: 24px;--board-renderer-icon-border-radius: 10px;--board-renderer-font: bold 16px/25px var(--mdc-icon-font, "Material Icons");--board-renderer-icon-edit-background-color: #95d40f;--board-renderer-icon-view-background-color: #27a1de;--board-list-background-color: var(--main-section-background-color);--board-list-border-radius: var(--border-radius);--board-list-box-border: var(--margin-default) solid #fff;--board-list-box-shadow: var(--box-shadow);--board-list-margin: var(--margin-default);--board-list-tile-background-color: #fff;--board-list-tile-name-font: bold 14px/18px var(--theme-font);--board-list-tile-name-color: var(--secondary-color);--board-list-tile-description-font: 12px/14px var(--theme-font);--board-list-tile-description-color: var(--secondary-text-color);--board-list-tile-icon-color: var(--opacity-dark-color);--board-list-star-color: var(--opacity-dark-color);--board-list-star-active-color: var(--primary-color);--card-list-rows-height: 180px;--card-list-background-color: rgba(0, 0, 0, 0.07);--card-list-border-radius: var(--border-radius);--card-list-flip-transform: rotateX(180deg);--card-list-create-border: 1px dashed var(--primary-color);--card-list-create-border-radius: var(--border-radius);--card-list-create-icon-color: var(--primary-color);--card-list-create-color: var(--primary-color);--card-list-create-form-padding: 15px;--card-list-create-label-font: normal 14px var(--theme-font);--card-list-create-label-color: var(--secondary-color);--card-list-create-input-font: normal 14px var(--theme-font);--card-list-create-input-color: var();--card-list-create-input-border: 1px solid rgba(0, 0, 0, 0.2);--card-list-create-input-border-radius: var(--border-radius);--card-list-create-input-padding: 2px 9px;--card-list-create-margin: 0 0 7px 0;--edit-toolbar-background-color: var(--primary-color);--edit-toolbar-bigger-icon-size: 45px;--edit-toolbar-bigger-icon-line: 1px solid rgba(0, 0, 0, 0.1);--component-toolbar-background-color: var(--main-section-background-color);--component-toolbar-icon-size: 45px;--component-toolbar-border: 1px solid rgba(0, 0, 0, 0.1);--component-menu-background-color: #fff;--component-menu-border-color: var(--secondary-text-color);--component-menu-title: bold 11px/16px var(--theme-font);--component-menu-item-color: var(--secondary-color);--component-menu-item-hover-color: var(--secondary-text-color);--component-menu-item-icon-size: 20px;--property-sidebar-background-color: #eceff1;--property-sidebar-tab-icon-color: var(--secondary-color);--property-sidebar-fieldset-border: 1px solid rgba(0, 0, 0, 0.2);--property-sidebar-fieldset-label-color: var(--secondary-color);--property-sidebar-fieldset-label: normal 12px/16px var(--theme-font);--property-sidebar-fieldset-legend-color: var(--secondary-text-color);--property-sidebar-fieldset-legend: bold 13px var(--theme-font);--scene-inspector-color: var(--secondary-color);--scene-inspector-selected-background-color: rgba(115, 188, 28, 0.2);--scene-inspector-selected-border: 1px solid rgba(115, 188, 28, 1);--scene-inspector-name-background-color: var(--primary-color);--scene-inspector-eye-icon-color: var(--secondary-text-color)}@media(min-width: 461px)and (max-width: 1024px){body{--card-list-create-form-padding: 7px}}
+body{--menu-tools-background-color: var(--secondary-color);--menu-tools-iconbutton-size: var(--icon-tiny-size);--menu-tools-color: rgba(255, 255, 255, 0.6);--menu-tools-active-color: #fff}
+body{--primary-color-rgb: 234, 103, 128;--primary-color: rgb(var(--primary-color-rgb));--secondary-color-rgb: 57, 78, 100;--secondary-color: rgb(var(--secondary-color-rgb));--focus-color: var(--theme-white-color);--primary-background-color: var(--secondary-color);--secondary-background-color: #283644;--main-section-background-color: #f4f7fb;--theme-white-color: #fff;--theme-black-color: rgba(0, 0, 0, 0.9);--focus-background-color: var(--primary-color);--primary-text-color: #111;--secondary-text-color: #017e7f;--opacity-dark-color: rgba(0, 0, 0, 0.4);--opacity-light-color: rgba(255, 255, 255, 0.8);--status-success-color: #35a24a;--status-warning-color: #ee8d03;--status-danger-color: #d14946;--status-info-color: #398ace;--border-radius: 4px;--border-dark-color: 1px solid rgba(0, 0, 0, 0.15);--border-light-color: 1px solid rgba(255, 255, 255, 0.3);--box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);--theme-font: "Noto", Helvetica;--margin-default: 9px;--margin-narrow: 4px;--margin-wide: 15px;--padding-default: var(--margin-default);--padding-narrow: var(--margin-narrow);--padding-wide: var(--margin-wide);--scrollbar-thumb-color: rgba(57, 78, 100, 0.5);--scrollbar-thumb-hover-color: var(--primary-color);--fontsize-default: 14px;--fontsize-small: 13px;--fontsize-large: 16px;--app-grid-template-area: "header header header" "nav main aside" "nav footer aside";--title-margin: var(--margin-narrow) 0;--title-font: bold 24px var(--theme-font);--title-text-color: var(--secondary-color);--title-font-mobile: bold 20px var(--theme-font);--page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;--page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);--page-description-color: var(--secondary-text-color);--subtitle-padding: 12px 5px 3px 5px;--subtitle-font: bold 18px var(--theme-font);--subtitle-text-color: var(--primary-color);--subtitle-border-bottom: 1px solid var(--primary-color);--icon-tiny-size: 24px;--icon-default-size: 36px;--icon-big-size: 48px;--icon-default-color: var(--theme-white-color);--mdc-theme-on-primary: var(--theme-white-color);--mdc-theme-primary: var(--secondary-text-color);--mdc-theme-on-secondary: var(--theme-white-color);--mdc-theme-secondary: var(--primary-color);--mdc-button-outline-color: var(--primary-color);--mdc-danger-button-primary-color: var(--status-danger-color);--mdc-danger-button-outline-color: var(--status-danger-color);--mdc-button-outline-width: 1px;--mdc-button-horizontal-padding: 16px;--button-background-color: #fafbfc;--button-background-focus-color: var(--primary-color);--button-border: var(--border-dark-color);--button-border-radius: var(--border-radius);--button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;--button-padding: var(--padding-default);--button-color: var(--secondary-color);--button-font: normal 15px var(--theme-font);--button-text-transform: capitalize;--button-active-background-color: var(--status-success-color);--button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);--button-activ-border: transparent;--button-active-color: var(--theme-white-color);--button-active-font: bold 16px var(--theme-font);--button-primary-background-color: var(--secondary-text-color);--button-primary-active-background-color: var(--status-success-color);--button-primary-padding: var(--margin-default) var(--margin-wide);--button-primary-color: var(--theme-white-color);--button-primary-font: bold 16px var(--theme-font);--button-delete-background-color: var(--status-danger-color);--button-delete-active-background-color: var(--status-warning-color);--button-delete-padding: var(--margin-default) var(--margin-wide);--button-delete-color: var(--theme-white-color);--button-delete-font: bold 16px var(--theme-font);--th-padding: var(--padding-default);--th-border-top: 2px solid var(--secondary-color);--th-text-transform: capitalize;--th-font: bold var(--fontsize-small) var(--theme-font);--th-color: rgba(var(--secondary-color-rgb), 0.8);--tr-background-color: var(--theme-white-color);--tr-background-odd-color: rgba(255, 255, 255, 0.4);--tr-background-hover-color: #e1f5fe;--td-border-line: 1px solid rgba(0, 0, 0, 0.05);--td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);--td-padding: var(--padding-default);--td-font: normal 13px var(--theme-font);--td-color: var(--secondary-color);--label-cell-background-color: #f6f6f6;--label-font: normal var(--fontsize-default) var(--theme-font);--label-color: var(--secondary-color);--label-text-transform: capitalize;--input-margin: var(--margin-narrow) 0;--input-padding: var(--padding-default);--input-min-width: 200px;--input-font: normal var(--fontsize-default) var(--theme-font);--input-hint-font: normal var(--fontsize-small) var(--theme-font);--input-hint-color: #666;--input-container-max-width: 1000px;--fieldset-margin: var(--padding-wide) 0;--fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);--legend-padding: var(--padding-narrow) var(--padding-default);--legend-color: var(--secondary-text-color);--legend-font: bold 16px var(--theme-font);--grid-record-focused-background-color: var(--primary-color);--grid-record-focused-color: #fff;--attachment-tools-background-color: var(--primary-color);--attachment-selector-background-color: #fff;--attachment-selector-name-font: bold 14px var(--theme-font);--attachment-selector-border: 1px solid rgba(0, 0, 0, 0.2);--attachment-selector-icon-size: 35px;--attachment-selector-icon-font: normal 20px/35px var(--mdc-icon-font, "Material Icons");--attachment-selector-icon-color: var(--primary-color);--attachment-selector-icon-background-color: rgba(255, 255, 255, 0.85);--attachment-selector-etc-background-color: var(--primary-color);--attachment-selector-etc-font: bold 9px var(--theme-font);--attachment-selector-etc-icon-font: normal 72px var(--mdc-icon-font, "Material Icons");--attachment-selector-etc-icon-color: var(--secondary-color)}@media only screen and (max-width: 460px){body{--subtitle-margin: 0}}
+body{--system-info-background-color: var(--main-section-background-color);--system-info-content-padding: 40px 0 0 0;--system-info-font: normal 14px/24px var(--theme-font);--system-info-color: #666;--system-info-appname-color: var(--secondary-color);--system-info-appname-font: bold 20px/20px var(--theme-font);--system-info-description-color: var(--primary-color);--system-info-description-font: normal 15px/18px var(--theme-font);--system-info-version-background-color: var(--secondary-color);--system-info-version-color: #fff;--system-info-version-font: normal 15px/15px var(--theme-font)}
+body{--context-toolbar-background-color: var(--main-section-background-color);--context-toolbar-button-background-color: #fff;--context-toolbar-border: 1px solid rgba(57, 78, 100, 0.5);--context-toolbar-border-hover: 1px solid var(--primary-color);--context-toolbar-button-max-width: auto;--context-toolbar-button-height: 36px;--context-toolbar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 0;--context-toolbar-button-padding: 0 9px;--context-toolbar-button: normal 13px var(--theme-font);--context-toolbar-button-color: var(--secondary-color);--context-toolbar-iconbutton-color: var(--primary-text-color);--context-toolbar-iconbutton-size: 16px;--context-toolbar-function-button-height: 34px;--context-toolbar-function-button-radius: 5px;--context-toolbar-function-button-background-color: #446281;--context-toolbar-function-button-hover-background-color: var(--primary-color);--context-toolbar-function-iconbutton-size: 28px;--context-toolbar-function-iconbutton-color: var(--primary-background-color);--context-toolbar-function-button-lineheight: 36px;--context-toolbar-function-button-color: #fff;--context-toolbar-function-button-padding: 0 10px;--context-toolbar-function-button-border: 1px solid rgba(0, 0, 0, 0.1);--context-toolbar-list-background-color: var(--primary-background-color);--context-toolbar-list-text: bold 18px var(--theme-font);--context-toolbar-list-icon-size: var(--icon-default-size);--context-toolbar-side-padding: 15px;--context-toolbar-shadow-line: none;--context-toolbar-title: bold 19px var(--theme-font);--context-ui-background-color: rgba(40, 54, 68, 0.9);--context-ui-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);--context-ui-border-radius: 10px;--context-ui-padding: 10px;--context-ui-list-color: #d0fdee;--context-ui-list-border-bottom: 1px solid rgba(0, 0, 0, 0.3);--context-ui-list-border-hover-bottom: 1px solid var(--primary-color);--context-ui-list-padding: 5px;--context-ui-button-color: var(--secondary-text-color);--context-ui-button-hover-color: #fff;--context-ui-button-background-color: #fff;--context-ui-button-background-hover-color: var(--primary-color);--context-action-bar-button-margin: var(--margin-narrow) 0 var(--margin-wide) var(--margin-narrow);--context-action-bar-more-button-background-color: var(--context-ui-background-color);--context-action-bar-more-button-padding: 6px var(--padding-default);--context-action-bar-more-button-color: var(--theme-white-color);--context-action-bar-more-button-border-radius: 4px;--button-background-color: var(--secondary-color);--button-active-background-color: var(--primary-color);--button-margin: 10px 2px;--button-height: 28px;--button-color: #fff;--button-font: normal 13px var(--theme-font);--button-radius: 5px;--button-border: 1px solid transparent;--button-active-border: 1px solid rgba(0, 0, 0, 0.2)}@media only screen and (max-width: 460px){body{--context-toolbar-button: normal 9px var(--theme-font);--context-toolbar-button-max-width: 60px;--context-toolbar-button-height: 50px;--context-toolbar-iconbutton-size: 30px;--context-toolbar-border: none;--context-toolbar-border-hover: none;--context-toolbar-iconbutton-display: block;--context-toolbar-iconbutton-margin: -2px;--context-toolbar-button-background-color: transparent;--context-toolbar-button-margin: 0;--context-toolbar-function-button-height: 34px;--context-toolbar-function-button-lineheight: 34px;--context-toolbar-function-button-radius: 0;--context-toolbar-side-padding: 0;--context-toolbar-shadow-line: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);--context-toolbar-button-padding: 0 10px 0 0;--context-action-bar-button-margin: 0;--context-action-bar-more-button-border-radius: 0;--context-action-bar-more-button-padding: 6px var(--padding-wide)}}
+body{--auth-background: var(--primary-color);--auth-brand-name: bold 20px var(--theme-font);--auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);--auth-brand-welcome-msg: normal 12px var(--theme-font);--auth-title-color: var(--theme-white-color);--auth-title-font: bold 32px var(--theme-font);--auth-description-color: var(--secondary-text-color);--auth-description-font: normal 12px var(--theme-font);--auth-description-padding: 5px 5px 15px 5px;--auth-input-font: normal 18px/24px var(--theme-font);--auth-input-border: 1px solid var(--opacity-dark-color);--auth-input-border-light: 1px solid var(--opacity-light-color);--auth-input-color: var(--theme-white-color);--auth-button-background-color: var(--theme-white-color);--auth-button-background-focus-color: var(--status-success-color);--auth-button-font: bold 20px var(--theme-font);--auth-button-padding: 9px 12px 7px 12px;--profile-brand-width: 150px;--profile-brand-height: 45px;--profile-brand-padding: 30px auto 20px auto;--profile-wrap-max-width: 550px;--profile-icon-margin: 7% 0 0 0;--auth-input-field-width: 100%;--auth-input-field-font: normal 16px var(--theme-font);--change-password-field-font: var(--auth-input-field-font);--change-password-field-border: 1px solid rgba(0, 0, 0, 0.2);--change-password-field-border-radius: var(--border-radius);--change-password-field-margin: var(--margin-narrow) 0;--change-password-field-padding: var(--padding-default);--change-password-field-width: var(--auth-input-field-width);--auth-special-page-padding: 250px 0 100px 0;--checkin-background-color: var(--main-section-background-color);--checkin-header-height: 45px;--checkin-header-background-color: var(--primary-color);--checkin-header-title-font: bold 19px var(--theme-font);--checkin-header-title-color: var(--theme-white-color);--checkin-wrap-max-width: 500px;--checkin-wrap-padding: var(--padding-wide)}@media only screen and (max-width: 460px){body{--profile-wrap-max-width: 85vw;--auth-input-field-font: normal 20px var(--theme-font)}}@media(min-width: 461px)and (max-width: 1024px){body{--auth-input-field-font: normal 20px var(--theme-font)}}
+body{--more-panel-background-color: rgba(var(--secondary-color-rgb), 0.95);--more-panel-min-width: 200px;--morelet-min-width: 200px;--morelet-title-color: #fff;--morelet-title-font: normal 14px var(--theme-font);--morelet-border-bottom: 1px solid rgba(0, 0, 0, 0.15);--morelet-focus-border-top: 3px solid var(--primary-color);--morelet-background-color: #fff;--morelet-padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-default);--morelet-color: var(--secondary-color);--morelet-font: normal 0.9em/1.4em var(--theme-font);--morelet-icon-color: var(--main-section-background-color)}@media screen and (max-width: 460px){body{--morelet-padding: var(--padding-wide);--morelet-font: normal 1em/0.9em var(--theme-font)}}
+
+body{--font-tools-background-color: var(--primary-color);--font-selector-background-color: #fff;--font-selector-name-font: bold 14px var(--theme-font);--font-selector-border: 1px solid rgba(0, 0, 0, 0.2);--font-selector-icon-size: 35px;--font-selector-icon-font: normal 20px/35px var(--mdc-icon-font, "Material Icons");--font-selector-icon-color: var(--primary-color);--font-selector-icon-background-color: rgba(255, 255, 255, 0.85);--font-selector-etc-background-color: var(--primary-color);--font-selector-etc-font: bold 9px var(--theme-font);--font-selector-etc-icon-font: normal 72px var(--mdc-icon-font, "Material Icons");--font-selector-etc-icon-color: var(--secondary-color)}
+body{--tooltip-padding: 4px 4px 4px 4px;--tooltip-background-color: rgba(0, 0, 0, 0.7);--tooltip-font: bold 11px var(--theme-font)}
+body{--oops-note-icon-font: normal 24px var(--mdc-icon-font, "Material Icons");--oops-note-icon-color: rgba(var(--secondary-color-rgb), 0.3);--oops-note-icon-border: 2px solid rgba(var(--secondary-color-rgb), 0.3);--oops-note-icon-border-radius: 50px;--oops-note-icon-padding: var(--padding-default);--oops-note-title-margin: 7px 0 2px 0;--oops-note-title-font: bold 14px var(--theme-font);--oops-note-title-color: var(--secondary-color);--oops-note-description-font: normal 12px var(--theme-font);--oops-note-description-color: var(--primary-color)}@media only screen and (max-width: 460px){body{--oops-note-icon-padding: var(--padding-narrow);--oops-note-icon-font: normal 18px var(--mdc-icon-font, "Material Icons");--oops-note-title-font: bold 13px var(--theme-font);--oops-note-title-margin: var(--margin-narrow) 0 2px 0;--oops-note-description-font: normal 0px var(--theme-font)}}

package/dist-app/helps/about/components.md

@@ -0,0 +1,3 @@
+# Things Factory Components
+
+- [oops-progress](/helps/components/oops-progress.md)

package/dist-app/helps/about/framework/redirection.md

@@ -0,0 +1,45 @@
+# redirection
+
+사용자가 브라우저에서 어플리케이션을 사용하는 경우에 사용자의 액션에 의한 URL 요청이 서버쪽에서 여러가지 상황에서 다른 URL로 리디렉트될 수 있다.
+(HTTP 응답코드 302(임시이동)로 응답되는 상황을 의미한다.)
+URL 리디렉션으로 브라우저에는 사용자가 요청한 URL이 아닌 리디렉트된 페이지가 보여지게 된다.
+통상적으로 리디렉트된 페이지는 적절한 과정을 거쳐서 최종적으로는 항상 사용자가 최초에 요청한 URL에 해당하는 페이지로 도달하게 된다.
+
+## URL 리디렉션이 배제되는 경우
+
+- 데이타만을 요청하는 API호출인 경우에는 리디렉션이 동작하지 않는다.
+  - 모든 graphql 요청은 API 호출이다.
+  - Restful 요청의 경우에도 API로 호출된 경우가 있다.
+  - 클라이언트 요청이 API 호출인지 여부는 accept 헤더에 'text/html', '\*/\*\' 이 포함되어있는지로 판단한다. 즉, accept 헤더에 'text/html', '\*/\*'중의 하나라도 포함되어있으면, API호출이 아니라고 판단한다.
+
+## GET/POST method Routing Pair (리디렉션과 서버사이드 페이지 렌더링)
+
+사용자의 페이지 요청에 대해 리디렉션을 사용하는 경우와 서버사이드 페이지 렌더링이 사용되는 경우를 판단할 필요가 있다.
+클라이언트 페이지 네비게이션이 동반되는 플로우는 엄밀하게 이 원칙을 따라야 한다.
+다음 사례를 생각해보자
+
+- signin
+  - 사용자가 보낸 요청이 인증 정보를 필요로 하는 요청인 경우, 서버에서는 요청 패킷과 세션정보를 분석해서 현재 사용자 인증여부를 판단한다.
+  - 만약 인증에 실패하였다면, 사용자의 요청을 처리하게 전에 먼저 인증을 요청하는 페이지(signin)로 리디렉트 된다.
+  - 사용자의 최초 요청은 리디렉트 URL(signin)에 (redirectTo - URL Query String 파라미터로) 포함되어서 계속 유지되게 된다.
+  - 사용자 인증 페이지(signin)는 서버사이드 페이지 렌더링을 통해서 사용자에게 제공된다.
+  - 사용자는 인증 정보를 작성한 후 (signin) POST 요청으로 서버에 전달된다. POST 요청에도 최초 요청 URL은 (redirectTo Body 파라미터로) 계속 포함되어있다.
+    - 인증정보가 잘못되었다면, 다시 서버사이드 페이지 렌더링을 통해서 signin 페이지가 다시 제공된다.
+  - 서버에서는 사용자가 선택한 도메인 정보와 사용자가 원래 요청한 URL을 조합한 URL로 다시 리디렉트 한다.
+- checkin
+  - 사용자가 보낸 요청이 도메인(테넌시) 정보를 필요로하는 요청인 경우, 서버에서는 요청 패킷을 분석해서 어떤 도메인에서 서비스되어야 하는 지를 판단한다. (도메인을 판단하는데 세션정보를 사용해서는 안된다.)
+  - 만약 요청 패킷에서 도메인 정보를 찾을 수 없는 경우, 사용자의 요청을 처리하기 전에 먼저 도메인 선택을 요구하는 페이지(checkin)로 리디렉트 된다.
+  - 사용자의 최초 요청은 리디렉트 URL(checkin)에 (redirectTo - URL Query String 파라미터로) 포함되어서 계속 유지되게 된다.
+  - 도메인 선택을 요구하는 페이지(checkin)는 서버사이드 페이지 렌더링을 통해서 선택할 수 있는 도메인의 리스트를 포함해서 사용자에게 제공된다.
+  - 사용자가 도메인을 선택한 결과는 (checkin) POST 요청으로 서버에 전달된다. POST 요청에도 최초 요청 URL은 (redirectTo Body 파라미터로) 계속 포함되어있다.
+  - 서버에서는 사용자가 선택한 도메인 정보와 사용자가 원래 요청한 URL을 조합한 URL로 다시 리디렉트 한다.
+
+위의 사례에 따른 원칙은
+
+- 리디렉션 프로세스를 위해서는 각 페이지 PATH(eg. signin, checkin) 별로 2개의 라우팅 구현을 제공한다.
+  - get 메쏘드
+    - 리디렉션의 목적을 위한 페이지를 서버사이드에서 렌더링해서 브라우저에 제공한다.
+    - 원래의 요청 페이지 정보는 redirectTo URL Query String 파라미터로 포함한다.
+  - post 메쏘드
+    - 사용자의 대응을 통해 리디렉션의 목적을 처리하고, 원래의 요청 페이지로 리디렉션하는 기능을 제공한다.
+    - 원래의 요청 페이지 정보는 redirectTo Body 파라미터로 유지한다.

package/dist-app/helps/about/framework/typegraphql.md

@@ -0,0 +1,74 @@
+# TypeGraphql을 적용하는 이유.
+
+[Modern framework for GraphQL API in Node.js](https://typegraphql.com/)
+
+## 이전 방식에서 아쉬운 점
+
+[관련 이슈 - [shell] typegraphql fully support](https://github.com/hatiolab/things-factory/issues/770)
+
+- graphql의 타입이 typescript의 타입형태가 아니므로 resolver 구현시 명시적인 타입 적용이 어려워서 typescript의 장점이 반감됨.
+- 사실상 graphql타입과 entity는 거의 동일한 경우가 많은데, graphql의 타입이 entity의 타입과 일치하지 않으므로, resolver 구현시 typescript 타입을 다시 정의하게되는 경우도 있음.
+- graphql 관련된 구현(타입, 리솔버, 엔티티)가 분산되어 있으므로, redundant한 느낌이 있으며, 오류를 인식하거나 찾아내기가 어려웠음.
+
+## typegraphql을 적용시 개선되는 점
+
+- resolver를 구현할 때, typescript 타입을 온전히 적용할 수 있으므로, 타입관련된 코드 오류를 코딩 시점에 인지할 가능성이 높다.
+- gql template literal을 사용하여 graphql 타입을 정의하지 않아도 되므로, gql template literal과 관련된 오류가 방지된다.
+- resolver 구현시 graphql 타입정보가 같이 있으므로(타입과 구현이 분산되지 않으므로), 코드 오류가 방지된다.
+
+## 적용 방법
+
+- 이전방식과 typegraphql 방식이 혼용될 수 있도록 구성하였으므로, 신규로 개발하는 모듈부터 적용할 것을 추천함.
+- 다른 entity와 resolver에서 많이 레퍼런스되는 것들 우선하여 typegraphql을 적용하였음 (domain, auth-base, ..)
+  - shell
+  - auth-base (일부)
+  - setting-base
+  - integration-base
+  - board-service
+  - lite-menu
+  - ..
+- plop template - 'entity' generator 를 'service' generator 로 변경 적용하였음
+
+![Screen Shot 2021-08-08 at 11 55 41 AM](https://user-images.githubusercontent.com/1239480/128619236-3a5b52d6-e760-48dd-a9b1-78a6f89bedf1.png)
+
+## 유의 사항
+
+### types mapping
+
+| description       | typescript        | typegraphql                                | graphql         |
+| ----------------- | ----------------- | ------------------------------------------ | --------------- |
+| 문자열            | string            | String (tyepgraphql 자동 매핑)             | String          |
+| 정수형            | number (Integer)  | Int                                        | Int             |
+| 실수형            | number (Float)    | Float                                      | Float           |
+| 날자형            | Date              | Timestamp (tyepgraphql 자동 매핑)          | Timestamp       |
+| 오브젝트형        | ScalarObject      | ScalarObject                               | ScalarObject    |
+| any               | any               | ScalarAny                                  | ScalarAny       |
+| 사용자정의 클래스 | SomeClass         | SomeClass (ObjectType or InputType로 정의) | SomeClass       |
+| 사용자정의 Enum   | SomeEnumeration   | SomeEnumeration                            | SomeEnumeration |
+| 어레이형          | SomeType[]        | [SomeType]                                 | [SomeType!]     |
+| mandatory         | 변수명: SomeType  | SomeType with nullable => false (default)  | SomeType!       |
+| optional          | 변수명?: SomeType | SomeType with nullable => true             | SomeType        |
+
+### Annotations
+
+- ObjectType / InputType
+- Field
+- Resolver
+- Query / Mutation
+- Directive
+- Arg / Args
+- Context
+
+### Query sample
+
+![Screen Shot 2021-08-08 at 12 27 54 PM](https://user-images.githubusercontent.com/1239480/128619799-8ef2b3c7-dc12-48f5-9683-794636de2cd1.png)
+
+### Resolver sample
+
+![Screen Shot 2021-08-08 at 12 41 11 PM](https://user-images.githubusercontent.com/1239480/128619978-2ac766e1-f276-4013-87a4-5eec3083bae3.png)
+
+### 기존 방식과 새로운 방식의 혼용
+
+- auth-base 모듈에 기존 방식과 새로운 방식이 혼용되어 있으므로 참고.
+
+![Screen Shot 2021-08-08 at 12 21 27 PM](https://user-images.githubusercontent.com/1239480/128619652-d838f165-26f1-4cd3-8e4e-21d33cc46abb.png)

package/dist-app/helps/about/framework.md

@@ -0,0 +1,10 @@
+# Things Factory Framework
+
+## Developers Guide
+
+[Things Factory Framework Developers Guide](http://www.hatiolab.com/things-factory-doc/ko/intro/framework/)
+
+## Framework Concepts
+
+- [redirection](/helps/about/framework/redirection.md)
+- [typegraphql](/helps/about/framework/typegraphql.md)

package/dist-app/helps/about/modules.md

@@ -0,0 +1,7 @@
+# Things Factory Modules
+
+- [API](/helps/module/api.md)
+- [Dashboard](/helps/module/dashboard.md)
+- [Help](/helps/module/help.md)
+- [LiteMenu](/helps/module/lite-menu.md)
+- [Notification](/helps/module/notification.md)

package/dist-app/helps/about/things-factory.en.md

@@ -0,0 +1,255 @@
+# about things factory
+
+Things-Factory is an framework to develop web-based apps for desktop, mobile and edge device environment.
+
+Things-Factory framework is managed as a monorepo that is composed of hundreds of npm packages.
+These modules compose together to help you create performant modern JS apps that you love to develop and test. These packages are developed primarily to be used on top of the stack we like best for our JS apps; Typescript for the flavor, Koa for the server, LitElement for UI, Apollo for data fetching, and Jest for tests. That said, you can mix and match as you like.
+
+- [Contents for modules](./modules.md)
+- [Contents for components](./components.md)
+
+## features
+
+- It is based on module structure.
+  - You can configure related feature sets for each module.
+  - It is removable by module.
+  - You can define dependencies between modules. Apply nodejs module dependency structure.
+  - [Things Factory Modules](./modules.md)
+  - [What modules does this application consist of ? (click here with holding ALT key.)](/dependencies)
+- Responsible Web App
+  - by Service Worker, Webpush notification, Manifest
+  - application layout for mobile
+- Help
+  - markdown based online help
+- Support Theme
+- Monorepo managed by lerna and yarn
+  - [things-factory github repository](https://github.com/hatiolab/things-factory)
+- Powerful Graphic UI design & viewing tools (board modules)
+- Redux pattern
+- Use i18next for internationalization
+- Simple datagrid
+  - responsible design
+- Packaging function uses webpack
+- The code set is based on es6,7,8, and transpiling with babel
+  - class-properties
+  - decorators
+  - object-rest-spread
+- Using Web Component-based DomElement - Defining custom element with LitElement
+- It is activated by linking with URL path and history in Single Page Application.
+- Each page is loaded at the time of initial activation. (lazy loading)
+- Zero Configuration function. It uses SSDP (Service Discovery Protocol) to automatically find services to be connected automatically and provide related functions. For example, it attempts to connect automatically by finding a server to connect to.
+- JWT based authentication (requires improvement to be supported by the server framework)
+- Oauth2 based extern interface
+  - as a Oauth2 Server
+  - as a Oauth2 Client
+- Free branding
+- Deploy
+  - [docker](http://docker.com) ready
+  - [kubernetes](http://kubernetes.io) ready
+
+## structural conventions
+
+- Redux
+  - The way to manage the overall state of an Application is using Redux pattern.
+  - The application, or base modules, can prepare points in the store that can be extended by a sub-module and provide an action.
+  - The sub-modules connect to the extension structure of the application or parent module using the action defined in the parent (base) module.
+- Page, Layout and Component
+  - Pages are activated by associating with the URL. (route)
+  - Layouts provide a framework for the layout and structure of the entire application UI elements.
+  - The components provide independent (atomic) functionality.
+    - The component excludes dependencies on the application in order to maintain implementation independence.
+      - Style maintains its independence by using css variables.
+      - Multilinguals maintain independence by using ox-i18n components. (Only have dependencies on ox-i18n.)
+      - The component does not have a premise for the layout (display, position) of the host (container) to which it will be used.
+  - page, layouts are connected to redux.
+  - Components do not connect to redux, but they work with pages through properties.
+- Base Module and extension (common) Modules (ex. provider, ui)
+  - The Base Module provides an abstract definition of special functions.
+  - The Base Module is said to provide functional services to the extension module.
+  - The extension module can add the base module as a dependent module and directly use the functions defined in the base module.
+  - Another way the extension module extends the Base Module is by using the reducer and action added to the store.
+  - The Base Module is a base module that reads a group of modules. For example, board-base module is a base module for all board functions. In addition, label-base module defines and implements functions related to the label, including barcode label pop-up, barcode label scanning, barcode label rendering and printing.
+  - The naming convention of base module for xxx module is 'xxx-base'.
+- Provider Module
+  - Sub-module that fills the data of Base module
+  - It mainly serves to fill the data defined in Base module from the external server.
+  - The naming convention for Provider module of xxx module is 'xxx-provider'.
+  - If it is necessary to be distinguished by the way data is provided, the naming convention for Provider module of xxx module using yyy method can be defined as 'xxx-provider-yyy'.
+- UI Module
+  - Sub-module responsible for the screen configuration related to Base module
+  - The naming convention for UI module of xxx module is 'xxx-ui'.
+  - If it is necessary to be distinguished by UI configuration method, the naming convention for UI module of xxx module using yyy method may be 'xxx-ui-yyy'.
+- Shell, Module and Application
+  - Shell provides all the structures that enable the module structure in the development and execution stages.
+    - redux, assets, routing
+    - build module, build application
+  - Module is only responsible for implementing its own purpose in the Shell base.
+  - Application is the final product that consists of the modules necessary for the purpose of Shell and the user.
+    - Configurations by Application
+      - Manifest file (brand-related - application name, logo image)
+      - Other brand related - homepage link, banner logo
+      - Style : Representative color table, other css variables
+      - Server connection IP
+      - Other source/resource override
+
+## Other coding conventions
+
+- Source file length recommended
+  - Each source file implements one of the most important purposes. (Be responsible for simple purposes rather than multiple purposes.)
+  - If there is no specific reason for each source file, it is recommended not to exceed 200 lines.
+- Naming
+
+  - class
+    - Class name : starts with uppercase, camel-case
+    - private property, method : starts with \_(underscore), camel-case
+    - public property, method : starts with lowercase, camel-case
+    - class property, method : starts with lowercase, camel-case
+    - Event handler : starts with on + EventName, camel-case
+
+- Localization
+  - Don’t capitalize explicitly in locale file
+
+```
+"field.system brief": "System Brief" (x)
+"field.system brief": "system brief" (o)
+```
+
+You can set it to style where you need it.
+
+```
+text-transform: capitalize;
+text-transform: uppercase;
+```
+
+- If possible, use ‘ms.json’ rather than ‘ms-My.json’. In particular, use ‘ms-My’ only if it is a Malay language that is used differently only in Malaysia.
+
+## authentication
+
+### things-factory/shell
+
+- Control the authentication process through auth base.
+  - Set authentication through auth base.
+- Provide auth action.
+  - You can change store through authentication related action.
+- Provide auth reducer.
+- That is, it sets through auth base and provides auth-related extension point.
+- In particular, auth base function is provided directly in things-factory shell.
+
+### things-factory/auth-ui
+
+- Provide the client side authentication process based on JSON webtoken.
+
+## prerequisites
+
+- Install Windows Subsystem for Linux on Windows (Windows)
+  - Install WSL using Ubuntu following https://docs.microsoft.com/en-gb/windows/wsl/install-win10
+- VS Code Extensions
+  - Prettier - Code formatter
+  - es6-string-css
+  - lit-html
+- VS Code Configuration
+  - Format on save: true
+- nodejs (v8.0.0 and above)
+- yarn
+- Chrome Browser Extension
+  - https://github.com/zalmoxisus/redux-devtools-extension
+- Node-gyp (For Ubuntu)
+  - npm install -g node-gyp
+- Python2 (For Ubuntu)
+  - sudo apt-get install python
+  - npm install --python=python2.7
+  - npm config set python python2.7
+- mdns (For Ubuntu)
+  - sudo apt-get install build-essential
+  - sudo apt-get install libavahi-compat-libdnssd-dev
+- node-printer (For Ubuntu)
+  - sudo apt-get install libcups2-dev
+
+## Usages
+
+The things-factory repo is managed as a monorepo that is composed of hundreds of npm packages.
+Each package has its own `README.md` and documentation describing usage.
+
+```
+# very first time
+$ yarn install
+$ yarn build # build all packages
+$ DEBUG=things-factory:*,typeorm:* yarn workspace @things-factory/operato-mms run migration
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a new module package(ie. @things-factory/newbee) added
+$ yarn install # make newbee package join
+$ yarn workspace @things-factory/newbee build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# after a dependent package(ie. @things-factory/dependa) modified
+$ yarn workspace @things-factory/dependa build
+$ DEBUG=things-factory:* yarn workspace @things-factory/operato-mms run serve:dev
+```
+
+```
+# run application (ie. @things-factory/operato-mms) in production mode
+$ yarn workspace @things-factory/dependa build
+$ yarn workspace @things-factory/dependa build:client
+$ yarn workspace @things-factory/operato-mms run serve
+
+# The way to use the config file is the same as before.
+# Don't forget to give a config file to make the app run.
+```
+
+```
+# generate new application (ie. @things-factory/operato-xyz)
+$ yarn generate app
+  ? What should this application's name be? e.g. operato-abc > # type "operato-xyz"
+
+# generate new module (ie. @things-factory/notification)
+$ yarn generate module
+  ? What should this module's name be? e.g. menu > # type "notification"
+
+# generate new entity in a module (ie. "sms" entity in @things-factory/notification module)
+$ yarn generate entity
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this entitie's name be? e.g. company, company-ext > # type "sms"
+
+# generate new page in a module (ie. "sms-view" page in @things-factory/notification module)
+$ yarn generate page
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this pages's name be? e.g. abc-viewer > # type "sms-view"
+
+# generate new scene-module from scratch (ie. @things-factory/scene-random)
+$ yarn generate app
+  ? What should this module's name be? e.g. random > # type "scene-random"
+
+# generate new scene-component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate component
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
+
+# generate new container component in a module (ie. "button" container component in @things-factory/scene-switch module)
+$ yarn generate container
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
+
+# generate new html base scene component in a module (ie. "button" html-component in @things-factory/scene-switch module)
+$ yarn generate html-component
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
+
+# generate new data source scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-source
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
+
+# generate new data transform scene component in a module (ie. "button" component in @things-factory/scene-switch module)
+$ yarn generate data-transform
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
+```
+
+## References
+
+- https://github.com/material-components/material-components-web-components