@simple-reporting/base 1.0.22 → 1.0.24

package/dev/index.html

@@ -12,7 +12,7 @@
       >this page requires javascript to work properly. please enable javascript in your
       browser</noscript
     >
-    <div id="app" class="slr-page"></div>
+    <div id="app" class="srl-page"></div>
     <script type="module" src="src/entries/main.ts"></script>
   </body>
 </html>

package/dev/livingdocs.config.json

@@ -110,24 +110,24 @@
       "identifier": "wp_cf_prettyTitle",
       "type": "text",
       "matches": [
-        "title-h1.title-h1-text",
+        "title-h1.title-h1",
         "title-h2.title-h2-text",
         "title-h3.title-h3-text",
         "title-h4.title-h4-text",
-        "title-h5.title-h5-text",
-        "title-h6.title-h6-text"
+        "title-h5.title-h5",
+        "title-h6.title-h6"
       ]
     },
     {
       "identifier": "menuTitle",
       "type": "text",
       "matches": [
-        "title-h1.title-h1-text",
+        "title-h1.title-h1",
         "title-h2.title-h2-text",
         "title-h3.title-h3-text",
         "title-h4.title-h4-text",
-        "title-h5.title-h5-text",
-        "title-h6.title-h6-text"
+        "title-h5.title-h5",
+        "title-h6.title-h6"
       ]
     },
     {

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.22",
+    "@simple-reporting/base": "^1.0.24",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/dev/src/Dialog.vue

@@ -57,6 +57,9 @@ body:has(.srl-page__dialog[open]) {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
+  position: fixed;
+  inset: 0;
+  margin: 10vh auto 0;
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.3);

package/dev/src/assets/scss/general.scss

@@ -7,6 +7,7 @@
 $font-weight-bold: map.get(srl.$meta, font, weight, bold);
 
 body {
+  background: srl.colors-white-1000();
   color: srl.colors-black-1000();
 }
 

package/dev/src/assets/scss/pdf.scss

@@ -85,6 +85,19 @@ img {
   }
 }
 
+/*
+  Hold titles and the following component on the same page
+*/
+.srl-title-h1,
+.srl-title-h2,
+.srl-title-h3,
+.srl-title-h4,
+.srl-title-h5 {
+  & + * {
+    break-before: avoid;
+  }
+}
+
 /*
   Layout
 */

package/dev/src/entries/pdf.ts

@@ -1,2 +1,15 @@
 import '#imports/pdf.scss'
-import * as Awesomizr from 'srl/Awesomizr.js'
+import * as Awesomizr from 'srl/pdf/Awesomizr.js'
+import * as PDFNotes from 'srl/pdf/PDFNotes.ts'
+import * as PDFSetPageNumbers from 'srl/pdf/PDFSetPageNumbers.ts';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new PDFNotes({
+    noteClass: '.srl-category-notes_group, .srl-category-notes_holding'
+  })
+
+  new PDFSetPageNumbers({
+    tocItemClass: '.srl-pdf-toc__item:not(.srl-pdf-toc__item--blank)',
+    tocItemPageNumberClass: '.srl-pdf-toc__number'
+  });
+})

package/dev/srl.config.json

@@ -744,6 +744,27 @@
           }
         }
       },
+      {
+        "name": "toc-item",
+        "font-family": "Inter",
+        "font-size": 14,
+        "line-height": 1.5,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "black-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "9pt",
+            "line-height": 1.444
+          },
+          "up": {
+            "tablet-pt": {
+              "font-size": 16
+            }
+          }
+        }
+      },
       {
         "name": "editor-label-text",
         "font-family": "Inter",

package/livingdocs/040.Media/010.table/scss/pdf.scss

@@ -1,6 +1,12 @@
 @use 'srl';
 @use 'sass:map';
 
+$table-cells-width-in-mm: false;
+
+.srl-table {
+  break-inside: avoid;
+}
+
 .srl-table__container > div {
   display: flex;
   flex-direction: column;
@@ -15,6 +21,20 @@
   }
 }
 
+@if $table-cells-width-in-mm == true {
+  .srl-table-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  table {
+    width: fit-content;
+    min-width: unset;
+  }
+}
+
 tr {
   &[class*="pagebreak"] {
     break-after: always;

package/livingdocs/080.CV/010.cv/cv.html

@@ -1,40 +1,42 @@
-<div class="srl-cv">
-  <div class="srl-grid srl-cv__header">
-    <div class="srl-grid__inner srl-cv__inner">
-      <div class="srl-cv__header-portrait">
-        <figure class="srl-cv__figure">
-          <img class="srl-cv__img" doc-image="image" />
-        </figure>
-      </div>
-      <div class="srl-cv__header-content">
-        <p class="srl-title-h3">
+<srl-article-accordion class="srl-cv" data-replace-tag="div">
+    <div class="srl-grid srl-cv__header">
+        <div class="srl-grid__inner srl-cv__inner">
+            <div class="srl-cv__header-portrait">
+                <figure class="srl-cv__figure">
+                    <img class="srl-cv__img" doc-image="image" />
+                </figure>
+            </div>
+            <div class="srl-cv__header-content">
+                <p class="srl-title-h3">
           <span class="srl-title-h3__text" doc-editable="cv-title-h3">
             Max Mustermann
           </span>
-        </p>
-        <p class="srl-title-h4">
+                </p>
+                <p class="srl-title-h4">
           <span class="srl-title-h4__text" doc-editable="cv-title-h4">
             Chairman of the Group Management, Chief Executive Officer (CEO)
           </span>
-        </p>
-        <p class="srl-paragraph" doc-editable="cv-text-excerpt">
-          Swiss, born 1956 <br />
-          Appointed in 2018
-        </p>
-      </div>
+                </p>
+                <p class="srl-paragraph" doc-editable="cv-text-excerpt">
+                    Swiss, born 1956 <br />
+                    Appointed in 2018
+                </p>
+            </div>
+        </div>
     </div>
-  </div>
-  <div class="srl-cv__content" doc-container="cv-content"></div>
-  <div class="srl-grid srl-cv__button-container">
-    <div class="srl-grid__inner srl-flex srl-justify-self-center">
-      <button type="button" class="srl-cv__button">
-        <span class="srl-cv__button-more" doc-editable="cv-text-more">
-          Read more
-        </span>
-        <span class="srl-cv__button-close" doc-editable="cv-text-close">
-          close
-        </span>
-      </button>
+    <div class="srl-cv__content srl-article-accordion__content">
+        <div class="srl-article-accordion__wrapper" doc-container="cv-content"></div>
     </div>
-  </div>
-</div>
+    <div class="srl-grid srl-cv__button-container">
+        <div class="srl-grid__inner srl-flex srl-justify-self-center">
+            <button type="button" class="srl-cv__button srl-article-accordion__toggle">
+                <span class="srl-cv__button-more" doc-editable="cv-text-more">
+                  Read more
+                </span>
+                <span class="srl-cv__button-close" doc-editable="cv-text-close">
+                  close
+                </span>
+            </button>
+        </div>
+    </div>
+</srl-article-accordion>

package/livingdocs/100.Misc/010.anchor/anchor.html

@@ -1,4 +1,4 @@
-<p class="srl-anchor srl-editor-component" data-is-anchor="true">
+<p class="srl-anchor srl-editor-component" data-remove-from-translate-plus="true" data-remove-from-xhtml="complete" data-is-anchor="true">
   <span class="srl-anchor__text srl-editor-component__text" doc-editable="anchor-text">
     Must start with a letter (A–Z or a–z); a number is not allowed. After the
     first letter, any combination of letters (a–z, A–Z), digits (0–9), hyphens

package/livingdocs/100.Misc/020.accordion/accordion.html

@@ -1,8 +1,10 @@
-<div class="srl-accordion">
+<srl-article-accordion class="srl-accordion" data-replace-tag="div">
   <div class="srl-accordion__inner">
-    <div class="srl-accordion__head" doc-container="header"></div>
-    <div class="srl-accordion__content">
-      <div class="srl-accordion__content-inner" doc-container="content"></div>
+    <div class="srl-accordion__head">
+        <button class="srl-accordion__toggle srl-article-accordion__toggle" type="button" data-replace-tag="div" doc-container="header"></button>
+    </div>
+    <div class="srl-accordion__content srl-article-accordion__content">
+      <div class="srl-accordion__content-inner srl-article-accordion__wrapper" doc-container="content"></div>
     </div>
   </div>
-</div>
+</srl-article-accordion>

package/livingdocs/110.PDF/100.pdf-toc-item/scss/general.scss

@@ -6,7 +6,7 @@
   justify-content: space-between;
   border-top: srl.system-size-unit(1pt) solid srl.colors-black-1000();
   text-decoration: none;
-  @include srl.typography-title-h5();
+  @include srl.typography-toc-item();
 }
 
 .srl-pdf-toc__text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"
@@ -22,6 +22,7 @@
     "chalk": "^5.6.2",
     "colors": "^1.4.0",
     "commander": "^11.1.0",
+    "dotenv": "^17.2.3",
     "enquirer": "^2.4.1",
     "fs": "^0.0.1-security",
     "fs-extra": "^11.3.2",

package/scripts/beaver.js

@@ -1,9 +1,11 @@
 import { writeFileSync, readFileSync } from 'node:fs';
 import path from 'node:path/posix';
 import { colors } from './colors.js';
-import { readNsWowJson } from './utils.js';
+import { readNsWowJson, deepAssign } from './utils.js';
 import colorPalette from '@kne/color-palette';
 import folders from './folders.js';
+import { buildVariables } from "./build/variables.js";
+
 /**
  * Maps the values of an object or array recursively.
  *
@@ -176,24 +178,18 @@ async function beaver(verbose = 0) {
     verbose = verbose ? 1 : 0;
   }
 
-  if (typeof configJson.system === 'undefined') {
-    configJson.system = {};
-  }
-
-  if (typeof configJson.system.environment === 'undefined') {
-    configJson.system.environment = process.env.NODE_ENV;
-  }
+  const configAssigned = deepAssign(configJson, buildVariables);
 
-  if (typeof configJson.fonts !== 'undefined') {
-    const fontBasePath = configJson.fonts['font-base-path'] ?? '';
+  if (typeof configAssigned.fonts !== 'undefined') {
+    const fontBasePath = configAssigned.fonts['font-base-path'] ?? '';
     if (fontBasePath.length) {
-      configJson.fonts['font-base-path'] = '.' + path.normalize(fontBasePath);
+      configAssigned.fonts['font-base-path'] = '.' + path.normalize(fontBasePath);
     }
-    if (typeof configJson.fonts.fonts !== 'undefined') {
-      for (let x = 0; x < configJson.fonts.fonts.length; x++) {
-        let font = configJson.fonts.fonts[x];
+    if (typeof configAssigned.fonts.fonts !== 'undefined') {
+      for (let x = 0; x < configAssigned.fonts.fonts.length; x++) {
+        let font = configAssigned.fonts.fonts[x];
         if (typeof font === 'string') {
-          configJson.fonts.fonts[x] = JSON.parse(
+          configAssigned.fonts.fonts[x] = JSON.parse(
             readFileSync(
               path.join(process.cwd(), fontBasePath, font, 'styles.json'),
             ),
@@ -205,10 +201,10 @@ async function beaver(verbose = 0) {
 
   const map = {};
 
-  for (const file in configJson) {
+  for (const file in configAssigned) {
     map[file] = {};
-    for (const variable in configJson[file]) {
-      map[file][variable] = mapValues(configJson[file][variable]);
+    for (const variable in configAssigned[file]) {
+      map[file][variable] = mapValues(configAssigned[file][variable]);
     }
   }
 

package/scripts/build/variables.d.ts

@@ -0,0 +1,6 @@
+export namespace buildVariables {
+    namespace system {
+        let environment: string;
+        let build: string;
+    }
+}

package/scripts/build/variables.js

@@ -0,0 +1,6 @@
+export const buildVariables = {
+    system: {
+        environment: 'development',
+        build: 'app',
+    }
+}

package/scripts/build.js

@@ -24,6 +24,8 @@ import folders from './folders.js';
 import { mapLdd } from './ldd/mapLdd.js';
 import { LivingdocsDesignValidator } from './ldd/LivingdocsDesignValidator.js';
 import { camelCase } from './utils.js';
+import { buildVariables } from "./build/variables.js";
+import './dotenv.js';
 
 const placeholderId = '6297EAFB-33A0-48B8-8D64-E61CDC3E9035';
 const nswowPath = folders.srlImports;
@@ -84,6 +86,10 @@ async function cleanOutput() {
  */
 async function buildApp() {
   console.log("\n\nBuild application");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'app';
+  buildVariables.system['size-unit'] = 'rem';
+  
   await checkFolders();
   const build = await viteBuild({
     build: {
@@ -101,7 +107,7 @@ async function buildApp() {
 
   // Copy public folder exclude nswow folders
   console.log(
-    '\n\nCopy public folder exclude nswow folders and exclude folder',
+    '\n\nCopy public folder exclude nswow folders and assets, template, exclude folder and index.html',
   );
   await cpSync(join(folders.srlPublic, '/'), join(outputPath, 'app'), {
     filter: (src) => {
@@ -110,7 +116,10 @@ async function buildApp() {
         src.startsWith(join(folders.srlPublic, 'html')) ||
         src.startsWith(join(folders.srlPublic, 'images')) ||
         src.startsWith(join(folders.srlPublic, 'json')) ||
-        src.startsWith(join(folders.srlPublic, 'exclude'))
+        src.startsWith(join(folders.srlPublic, 'exclude')) ||
+        src.startsWith(join(folders.srlPublic, 'assets')) ||
+        src.startsWith(join(folders.srlPublic, 'template')) ||
+        src.startsWith(join(folders.srlPublic, 'index.html'))
       ) {
         return false;
       } else {
@@ -144,9 +153,7 @@ async function buildApp() {
   index = index.replace(
     /(<div\s+[^>]*id\s*=\s*["']app["'][^>]*>)([\s\S]*?)(<\/div>)/i,
     `$1
-      <template>
-        [[content-${placeholderId}]]
-      </template>
+      [[content-${placeholderId}]]
     $3`,
   );
 
@@ -192,6 +199,10 @@ async function buildApp() {
  */
 async function buildDDev() {
   console.log("\n\nBuild application for DDEV");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'app';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
   const build = await viteBuild({
     build: {
@@ -280,6 +291,10 @@ async function zipLdd() {
  */
 async function buildPdf() {
   console.log("\n\nBuild PDF");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'pdf';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
 
   const config = {
@@ -312,6 +327,10 @@ async function buildPdf() {
 
 async function buildXbrl() {
   console.log("\n\nBuild XBRL");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'xbrl';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
 
   const config = {
@@ -351,6 +370,10 @@ async function buildXbrl() {
  */
 async function buildLdd(version) {
   console.log("\n\nBuild Livingdocs");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'ldd';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
   await mapLdd();
 
@@ -478,7 +501,7 @@ async function buildLdd(version) {
 }
 
 async function buildPdfCustomer(customer) {
-
+  const internalLddUrl = process.env.INTERNAL_LDD_URL ?? nsWowInternalLddUrl;
   const customersDir = join(folders.root, 'pdf', 'customers');
 
   if (customer === 'all') {
@@ -594,7 +617,7 @@ async function buildPdfCustomer(customer) {
 
     const pdfXmlStart = `<configuration xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\n`;
     const pdfXmlEnd = `\n</configuration>`;
-    const nsWowUrl = `${nsWowInternalLddUrl}/${lddJson.name}/${lddJson.version}/pdf`;
+    const nsWowUrl = `${internalLddUrl}/${lddJson.name}/${lddJson.version}/pdf`;
 
     const pdfConfig = [];
     cssReferences.forEach( p => {
@@ -640,6 +663,9 @@ async function buildPdfCustomer(customer) {
  */
 async function buildWord() {
   console.log("\n\nBuild Word");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'word';
+  buildVariables.system['size-unit'] = 'pt';
   await checkFolders();
 
   const config = {
@@ -740,16 +766,32 @@ function cleanupScssAlias(string) {
 async function mapScss() {
   await checkFolders();
   try {
+    const internalLddUrl = process.env.INTERNAL_LDD_URL ?? nsWowInternalLddUrl;
     const packageJson = await readPackageJson();
 
     const relativePathToRoot = join('..', '..', '/');
 
     const output = {
-      app: [],
-      ldd: [],
-      pdf: [],
-      word: [],
-      xbrl: [],
+      app: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      ldd: [
+            `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      pdf: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      word: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      xbrl: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
     };
 
     const fontFiles = await glob(join(folders.srlAssets, 'fonts', '**', '*.scss'), {
@@ -759,7 +801,7 @@ async function mapScss() {
     const fontsOutput = []
 
     if (fontFiles.length) {
-      fontsOutput.push(`@import "${nsWowInternalLddUrl}/${packageJson.name}/${packageJson.version}/fonts/style.css";`);
+      fontsOutput.push(`@import "${internalLddUrl}/${packageJson.name}/${packageJson.version}/fonts/style.css";`);
       fontFiles.forEach(f => {
         output.app.push(`"${relativePathToRoot}${f.relativePosix()}" as *`);
         output.xbrl.push(`"${relativePathToRoot}${f.relativePosix()}" as *`);
@@ -908,9 +950,7 @@ async function mapScss() {
 
     await writeFileSync(
       join(folders.srlImports, 'xbrl.scss'),
-      output.xbrl.length
-        ? `@use ` + output.xbrl.join(';\n@use ')
-        : '' + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
+      `@use ` + output.xbrl.join(`;\n@use `) + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
     );
 
     return true;

package/scripts/dotenv.d.ts

@@ -0,0 +1 @@
+export {};

package/scripts/dotenv.js

@@ -0,0 +1,8 @@
+import dotenv from 'dotenv'
+import folders from './folders.js';
+import { join } from 'node:path/posix';
+
+dotenv.config({quiet: true, path: join(folders.root, '.env.nswow')});
+dotenv.config({quiet: true, path: join(folders.root, '.env.production.local')});
+dotenv.config({quiet: true, path: join(folders.root, '.env.production')});
+dotenv.config({quiet: true});

package/scripts/init.js

@@ -58,7 +58,7 @@ async function init(folder, options) {
 
       await writeFileSync(
         `${projectPath}/.gitignore`,
-        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/`,
+        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/\n/.DS_Store\n/.idea\n/**/*.lcoal\n`,
       );
       console.log(`Project has created`);
       console.log(`cd ${folder}`);

package/scripts/ldd/mapLdd.js

@@ -141,7 +141,7 @@ async function mapComponents(lddJson) {
     components.forEach((component) => {
       // ldd static component
       try {
-        const htmlFile =  globSync(join(groupPath, component, '*.html'));
+        const htmlFile =  globSync(join(groupPath, component, '*.html'), { posix: true });
         if (htmlFile.length) {
           const htmlPath = htmlFile[0];
           const ldConfPath = join(groupPath, component, `ld-conf.json`);
@@ -164,7 +164,7 @@ async function mapComponents(lddJson) {
 
       //   vue async component
       try {
-        const vueFiles = globSync(join(groupPath, component, '*.vue'));
+        const vueFiles = globSync(join(groupPath, component, '*.vue'), { posix: true });
         if (vueFiles.length) {
           vueFiles.forEach( c => {
             const vueFile = c.split('/').pop();

package/scripts/utils.d.ts

@@ -61,4 +61,5 @@ export function camelCase(str: string): string;
  * @returns {Promise<string>} The package version.
  */
 export function getPackageVersion(packageName: string): Promise<string>;
+export function deepAssign(target: any, ...sources: any[]): any;
 export { writeJson };

package/scripts/utils.js

@@ -146,6 +146,27 @@ function getPackageVersion(packageName) {
   });
 }
 
+function deepAssign(target, ...sources) {
+    for (const source of sources) {
+        if (typeof source !== 'object' || source === null) continue;
+        for (const key of Object.keys(source)) {
+            if (
+                typeof source[key] === 'object' &&
+                source[key] !== null &&
+                !Array.isArray(source[key])
+            ) {
+                if (!target[key] || typeof target[key] !== 'object') {
+                    target[key] = {};
+                }
+                deepAssign(target[key], source[key]);
+            } else {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+
 export {
   writeJson,
   lddGroupNames,
@@ -160,4 +181,5 @@ export {
   writeNsWowJson,
   camelCase,
   getPackageVersion,
+  deepAssign,
 };

package/scss/colors/functions.scss

@@ -2,17 +2,9 @@
 @use 'variables';
 @use '../system';
 
-@function get($colorName, $media: false) {
+@function get($colorName) {
   @if not map.has-key(variables.$colors, $colorName) {
     @error "Invalid color \"#{$colorName}\" specified! Choose one of #{map.keys(variables.$colors)}";
   }
-
-  @if $media {
-    @return var(
-      --#{variables.$variable-prefix}color-#{$colorName}-#{$media},
-      var(--#{variables.$variable-prefix}color-#{$colorName})
-    );
-  }
-
-  @return var(--#{variables.$variable-prefix}color-#{$colorName});
+  @return system.root-style(#{variables.$variable-prefix}color-#{$colorName});
 }