underpost 2.6.3 → 2.7.2

package/src/client/components/core/AgGrid.js

@@ -1,160 +1,160 @@
-// https://www.ag-grid.com/javascript-data-grid/getting-started/
-// https://www.ag-grid.com/javascript-data-grid/themes/
-
-import { ThemeEvents, darkTheme } from './Css.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
-import * as agGrid from 'ag-grid-community';
-
-const AgGrid = {
-  grids: {},
-  theme: `ag-theme-alpine`, // quartz
-  Render: async function (options) {
-    let { id } = options;
-    setTimeout(() => {
-      // Grid Options: Contains all of the grid configurations
-      const gridOptions = {
-        // Row Data: The data to be displayed.
-        // rowHeight: 60,
-        enableCellChangeFlash: true,
-        defaultColDef: {
-          editable: false,
-          flex: 1,
-          minWidth: 50,
-          filter: true,
-          autoHeight: true,
-        },
-        // domLayout: 'autoHeight', || 'normal'
-        // Column Definitions: Defines & controls grid columns.
-        columnDefs: options?.gridOptions?.rowData?.[0]
-          ? Object.keys(options.gridOptions.rowData[0]).map((field) => {
-              return { field };
-            })
-          : [],
-        ...options.gridOptions,
-      };
-
-      // Your Javascript code to create the grid
-      const myGridElement = s(`.${id}`);
-      if (this.grids[id]) this.grids[id].destroy();
-      this.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
-      // myGridElement.style.setProperty('width', '100%');
-      ThemeEvents[id] = () => {
-        if (s(`.${id}`)) {
-          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
-          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
-        } else {
-          // console.warn('change theme: grid not found');
-          delete ThemeEvents[id];
-        }
-      };
-    });
-    return html`
-      <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
-        style="${options?.style
-          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
-          : 'height: 500px'}"
-      ></div>
-    `;
-  },
-  RenderStyle: async function (
-    options = {
-      eventThemeId: 'AgGrid',
-      style: {
-        'font-family': '',
-        'font-size': '',
-        'no-cell-focus-style': false,
-        'row-cursor': '',
-      },
-    },
-  ) {
-    /*
-     --ag-foreground-color: rgb(126, 46, 132);
-     --ag-background-color: rgb(249, 245, 227);
-     --ag-header-foreground-color: rgb(204, 245, 172);
-     --ag-header-background-color: rgb(209, 64, 129);
-     --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
-     --ag-header-column-resize-handle-color: rgb(126, 46, 132);
-
-     --ag-font-size: 17px;
-     */
-    if (!s(`.ag-grid-base-style`))
-      append(
-        'head',
-        html`<link
-            class="ag-grid-base-style"
-            rel="stylesheet"
-            type="text/css"
-            href="${getProxyPath()}styles/ag-grid-community/ag-grid.min.css"
-          /><link
-            rel="stylesheet"
-            type="text/css"
-            href="${getProxyPath()}styles/ag-grid-community/${this.theme}.min.css"
-          />`,
-      );
-    ThemeEvents[options.eventThemeId] = () => {
-      htmls(
-        `.ag-grid-style`,
-        html` ${options.style['font-family']
-            ? html`<style>
-                .ag-theme-alpine,
-                .ag-theme-alpine-dark {
-                  --ag-font-family: '{{ag-font-family}}';
-                }
-              </style>`.replaceAll('{{ag-font-family}}', options.style['font-family'])
-            : ''}
-          ${options.style['font-size']
-            ? html`<style>
-                .ag-theme-alpine,
-                .ag-theme-alpine-dark {
-                  --ag-font-size: '{{ag-font-size}}';
-                }
-              </style>`.replaceAll('{{ag-font-size}}', options.style['font-size'])
-            : ''}
-          ${options.style['no-cell-focus-style']
-            ? html`<style>
-                .ag-has-focus .ag-cell-focus {
-                  border: none !important;
-                }
-              </style>`
-            : ''}
-          ${options.style['row-cursor']
-            ? html`<style>
-                .ag-row {
-                  cursor: '{{ag-row-cursor}}';
-                }
-              </style>`.replaceAll(`'{{ag-row-cursor}}'`, options.style['row-cursor'])
-            : ''}
-
-          <style>
-            .ag-btn-renderer {
-              font-size: 16px;
-              min-width: 90px;
-              min-height: 90px;
-            }
-          </style>
-          ${darkTheme
-            ? html`
-                <style>
-                  .ag-cell-data-changed,
-                  .ag-cell-data-changed-animation {
-                    background-color: #6d68ff !important;
-                    background: #6d68ff !important;
-                    color: #e4e4e4 !important;
-                  }
-                </style>
-              `
-            : html`<style>
-                .ag-cell-data-changed,
-                .ag-cell-data-changed-animation {
-                  background-color: #d1d1d1 !important;
-                  background: #d1d1d1 !important;
-                  color: #2e2e2e !important;
-                }
-              </style>`}`,
-      );
-    };
-  },
-};
-
-export { AgGrid };
+// https://www.ag-grid.com/javascript-data-grid/getting-started/
+// https://www.ag-grid.com/javascript-data-grid/themes/
+
+import { ThemeEvents, darkTheme } from './Css.js';
+import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import * as agGrid from 'ag-grid-community';
+
+const AgGrid = {
+  grids: {},
+  theme: `ag-theme-alpine`, // quartz
+  Render: async function (options) {
+    let { id } = options;
+    setTimeout(() => {
+      // Grid Options: Contains all of the grid configurations
+      const gridOptions = {
+        // Row Data: The data to be displayed.
+        // rowHeight: 60,
+        enableCellChangeFlash: true,
+        defaultColDef: {
+          editable: false,
+          flex: 1,
+          minWidth: 50,
+          filter: true,
+          autoHeight: true,
+        },
+        // domLayout: 'autoHeight', || 'normal'
+        // Column Definitions: Defines & controls grid columns.
+        columnDefs: options?.gridOptions?.rowData?.[0]
+          ? Object.keys(options.gridOptions.rowData[0]).map((field) => {
+              return { field };
+            })
+          : [],
+        ...options.gridOptions,
+      };
+
+      // Your Javascript code to create the grid
+      const myGridElement = s(`.${id}`);
+      if (this.grids[id]) this.grids[id].destroy();
+      this.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
+      // myGridElement.style.setProperty('width', '100%');
+      ThemeEvents[id] = () => {
+        if (s(`.${id}`)) {
+          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
+          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+        } else {
+          // console.warn('change theme: grid not found');
+          delete ThemeEvents[id];
+        }
+      };
+    });
+    return html`
+      <div
+        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        style="${options?.style
+          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+          : 'height: 500px'}"
+      ></div>
+    `;
+  },
+  RenderStyle: async function (
+    options = {
+      eventThemeId: 'AgGrid',
+      style: {
+        'font-family': '',
+        'font-size': '',
+        'no-cell-focus-style': false,
+        'row-cursor': '',
+      },
+    },
+  ) {
+    /*
+     --ag-foreground-color: rgb(126, 46, 132);
+     --ag-background-color: rgb(249, 245, 227);
+     --ag-header-foreground-color: rgb(204, 245, 172);
+     --ag-header-background-color: rgb(209, 64, 129);
+     --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
+     --ag-header-column-resize-handle-color: rgb(126, 46, 132);
+
+     --ag-font-size: 17px;
+     */
+    if (!s(`.ag-grid-base-style`))
+      append(
+        'head',
+        html`<link
+            class="ag-grid-base-style"
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/ag-grid.min.css"
+          /><link
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/${this.theme}.min.css"
+          />`,
+      );
+    ThemeEvents[options.eventThemeId] = () => {
+      htmls(
+        `.ag-grid-style`,
+        html` ${options.style['font-family']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-family: '{{ag-font-family}}';
+                }
+              </style>`.replaceAll('{{ag-font-family}}', options.style['font-family'])
+            : ''}
+          ${options.style['font-size']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-size: '{{ag-font-size}}';
+                }
+              </style>`.replaceAll('{{ag-font-size}}', options.style['font-size'])
+            : ''}
+          ${options.style['no-cell-focus-style']
+            ? html`<style>
+                .ag-has-focus .ag-cell-focus {
+                  border: none !important;
+                }
+              </style>`
+            : ''}
+          ${options.style['row-cursor']
+            ? html`<style>
+                .ag-row {
+                  cursor: '{{ag-row-cursor}}';
+                }
+              </style>`.replaceAll(`'{{ag-row-cursor}}'`, options.style['row-cursor'])
+            : ''}
+
+          <style>
+            .ag-btn-renderer {
+              font-size: 16px;
+              min-width: 90px;
+              min-height: 90px;
+            }
+          </style>
+          ${darkTheme
+            ? html`
+                <style>
+                  .ag-cell-data-changed,
+                  .ag-cell-data-changed-animation {
+                    background-color: #6d68ff !important;
+                    background: #6d68ff !important;
+                    color: #e4e4e4 !important;
+                  }
+                </style>
+              `
+            : html`<style>
+                .ag-cell-data-changed,
+                .ag-cell-data-changed-animation {
+                  background-color: #d1d1d1 !important;
+                  background: #d1d1d1 !important;
+                  color: #2e2e2e !important;
+                }
+              </style>`}`,
+      );
+    };
+  },
+};
+
+export { AgGrid };

package/src/client/components/core/Auth.js

@@ -1,19 +1,19 @@
-const token = Symbol('token');
-
-const Auth = {
-  [token]: '',
-  setToken: function (value = '') {
-    return (this[token] = value);
-  },
-  deleteToken: function () {
-    return (this[token] = '');
-  },
-  getToken: function () {
-    return this[token];
-  },
-  getJWT: function () {
-    return `Bearer ${this.getToken()}`;
-  },
-};
-
-export { Auth };
+const token = Symbol('token');
+
+const Auth = {
+  [token]: '',
+  setToken: function (value = '') {
+    return (this[token] = value);
+  },
+  deleteToken: function () {
+    return (this[token] = '');
+  },
+  getToken: function () {
+    return this[token];
+  },
+  getJWT: function () {
+    return `Bearer ${this.getToken()}`;
+  },
+};
+
+export { Auth };

package/src/client/components/core/Badge.js

@@ -1,32 +1,32 @@
-import { getId, getIsoDate } from './CommonJs.js';
-import { Css, renderCssAttr, Themes } from './Css.js';
-import { Modal } from './Modal.js';
-import { append, prepend, s } from './VanillaJs.js';
-
-const Badge = {
-  Tokens: {},
-  Render: async function (options = { id: '', type: 'circle-red', classList: '', text: '' }) {
-    if (!options.id) options.id = getId(this.Tokens, 'badge-');
-    else options.id = 'badge-' + options.id;
-    if (options && options.style && !options.style.color) options.style.color = 'white';
-    if (!options.classList) options.classList = '';
-
-    const { id, type } = options;
-    this.Tokens[id] = { ...options };
-
-    switch (type) {
-      case 'circle-red':
-        options.classList += ' badge-notification-circle-red ';
-        break;
-
-      default:
-        break;
-    }
-
-    return html`<div class="badge wfm ${options.classList} ${id}" style="${renderCssAttr(options)}">
-      <div class="badge-text">${options?.text ? options.text : 'B'}</div>
-    </div>`;
-  },
-};
-
-export { Badge };
+import { getId, getIsoDate } from './CommonJs.js';
+import { Css, renderCssAttr, Themes } from './Css.js';
+import { Modal } from './Modal.js';
+import { append, prepend, s } from './VanillaJs.js';
+
+const Badge = {
+  Tokens: {},
+  Render: async function (options = { id: '', type: 'circle-red', classList: '', text: '', style: '' }) {
+    if (!options.id) options.id = getId(this.Tokens, 'badge-');
+    else options.id = 'badge-' + options.id;
+    if (options && options.style && !options.style.color) options.style.color = 'white';
+    if (!options.classList) options.classList = '';
+
+    const { id, type } = options;
+    this.Tokens[id] = { ...options };
+
+    switch (type) {
+      case 'circle-red':
+        options.classList += ' badge-notification-circle-red ';
+        break;
+
+      default:
+        break;
+    }
+
+    return html`<div class="badge wfm ${options.classList} ${id}" style="${renderCssAttr(options)}">
+      <div class="badge-text">${options?.text ? options.text : 'B'}</div>
+    </div>`;
+  },
+};
+
+export { Badge };

package/src/client/components/core/BlockChain.js

@@ -1,41 +1,41 @@
-import { BlockChainService } from '../../services/blockchain/blockchain.service.js';
-import { BtnIcon } from './BtnIcon.js';
-import { dynamicCol } from './Css.js';
-import { EventsUI } from './EventsUI.js';
-import { Input } from './Input.js';
-import { Translate } from './Translate.js';
-
-const BlockChainManagement = {
-  Render: async function (options) {
-    setTimeout(() => {
-      EventsUI.onClick(`.btn-upload-blockchain`, async () => {
-        // const { result, status } = new BlockChainService.post();
-      });
-    });
-    return html` ${dynamicCol({ containerSelector: options.idModal, id: 'blockchain' })}
-      <div class="fl">
-        <div class="in fll blockchain-col-a">
-          <div class="in section-mp">
-            <div class="in sub-title-modal"><i class="fa-solid fa-sliders"></i> ${Translate.Render('config')}</div>
-            <div class="in">
-              ${await Input.Render({
-                id: `blockchain-seed`,
-                label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('blockchain-seed')}`,
-                containerClass: 'section-mp width-mini-box input-container',
-                placeholder: true,
-              })}
-              ${await BtnIcon.Render({
-                class: `section-mp btn-custom btn-upload-blockchain`,
-                label: html`<i class="fas fa-plus"></i> ${Translate.Render(`create`)}`,
-              })}
-            </div>
-          </div>
-        </div>
-        <div class="in fll blockchain-col-b">
-          <div class="in section-mp"></div>
-        </div>
-      </div>`;
-  },
-};
-
-export { BlockChainManagement };
+import { BlockChainService } from '../../services/blockchain/blockchain.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { dynamicCol } from './Css.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { Translate } from './Translate.js';
+
+const BlockChainManagement = {
+  Render: async function (options) {
+    setTimeout(() => {
+      EventsUI.onClick(`.btn-upload-blockchain`, async () => {
+        // const { result, status } = new BlockChainService.post();
+      });
+    });
+    return html` ${dynamicCol({ containerSelector: options.idModal, id: 'blockchain' })}
+      <div class="fl">
+        <div class="in fll blockchain-col-a">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-sliders"></i> ${Translate.Render('config')}</div>
+            <div class="in">
+              ${await Input.Render({
+                id: `blockchain-seed`,
+                label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('blockchain-seed')}`,
+                containerClass: 'section-mp width-mini-box input-container',
+                placeholder: true,
+              })}
+              ${await BtnIcon.Render({
+                class: `section-mp btn-custom btn-upload-blockchain`,
+                label: html`<i class="fas fa-plus"></i> ${Translate.Render(`create`)}`,
+              })}
+            </div>
+          </div>
+        </div>
+        <div class="in fll blockchain-col-b">
+          <div class="in section-mp"></div>
+        </div>
+      </div>`;
+  },
+};
+
+export { BlockChainManagement };

package/src/client/components/core/Blog.js

@@ -1,9 +1,9 @@
-import { RichText } from './RichText.js';
-
-const Blog = {
-  Render: async function () {
-    return html`${await RichText.Render()}`;
-  },
-};
-
-export { Blog };
+import { RichText } from './RichText.js';
+
+const Blog = {
+  Render: async function () {
+    return html`${await RichText.Render()}`;
+  },
+};
+
+export { Blog };