@simple-reporting/base 1.0.40 → 1.0.43

package/livingdocs/070.Container/020.columns-container/columns-container.html

@@ -1,5 +1,5 @@
 <div class="srl-grid srl-columns srl-nested-container">
-  <div class="srl-grid__inner srl-flex srl-flex-gap">
+  <div class="srl-grid__inner srl-columns__inner srl-flex srl-flex-gap">
     <div
       class="srl-columns__column srl-columns__column--1"
       doc-container="column-1"

package/livingdocs/070.Container/020.columns-container/ld-conf.json

@@ -1,6 +1,6 @@
 {
   "name": "columns-container",
-  "label": "Columns container",
+  "label": "Layout column container",
   "properties": ["width-reduced", "vertical-alignment", "pdf-spacer"],
   "directives": {
     "show-column-3": {

package/livingdocs/070.Container/020.columns-container/scss/pdf.scss

@@ -1,5 +1,4 @@
 @use "srl";
-@use "@/assets/scss/margins";
 
 @include srl.system-add-root-style(srl-model-flex-direction, row);
 

package/livingdocs/070.Container/030.background-container/scss/general.scss

@@ -1,9 +1,8 @@
 @use "srl";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 .srl-background-container {
   padding-block: srl.spacer-get(800);
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);

package/livingdocs/080.CV/010.cv/scss/editor.scss

@@ -7,4 +7,4 @@
 
 .srl-cv__button-container {
   @include srl.spacer-margin-block(400);
-}
+}

package/livingdocs/080.CV/010.cv/scss/general.scss

@@ -1,9 +1,8 @@
 @use 'srl';
 @use "sass:map";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-cv__inner {
   display: flex;

package/livingdocs/080.CV/010.cv/scss/xbrl.scss

@@ -1 +1,2 @@
-@use 'general';
+@use 'general';
+@use 'web';

package/livingdocs/080.CV/020.cv-time-span/scss/general.scss

@@ -1,13 +1,12 @@
 @use 'srl';
 @use "sass:map";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 .srl-cv-time-span {
   @include srl.typography-cv-time-span();
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-cv-time-span__inner {
   display: flex;

package/livingdocs/080.CV/020.cv-time-span/scss/xbrl.scss

@@ -1 +1,2 @@
-@use 'general';
+@use 'general';
+@use 'web';

package/livingdocs/090.Signatures/010.signature-container/scss/xbrl.scss

@@ -1 +1,3 @@
-@use 'general';
+@use 'srl';
+@use 'general';
+@use 'web';

package/livingdocs/090.Signatures/020.signature-item/scss/xbrl.scss

@@ -1 +1,2 @@
 @use 'general';
+@use 'web';

package/livingdocs/120.Startpage/010.hero-video/hero-video.html

@@ -1,4 +1,9 @@
-<div class="srl-hero-video">
+<div
+  class="srl-hero-video"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-hero-video__video-container" doc-html="free-html">
 
   </div>

package/livingdocs/120.Startpage/010.hero-video/scss/web.scss

@@ -1,5 +1,4 @@
 @use "srl";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 .srl-hero-video {
@@ -10,7 +9,7 @@
   }
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-hero-video__video-container {
   position: relative;

package/livingdocs/120.Startpage/020.teaser-title-image-quote/scss/web.scss

@@ -1,8 +1,7 @@
 @use "srl";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-title-image-quote__title-container {
   @extend %srl-wide-width;

package/livingdocs/120.Startpage/020.teaser-title-image-quote/teaser-title-image-quote.html

@@ -1,4 +1,9 @@
-<div class="srl-grid srl-title-image-quote">
+<div
+  class="srl-grid srl-title-image-quote"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-title-image-quote__title-container">
     <h2 class="srl-title-h2">
       <span class="srl-title-h2__number-text-container">

package/livingdocs/120.Startpage/030.teaser-quote/scss/web.scss

@@ -1,8 +1,7 @@
 @use "srl";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-teaser-quote {
   position: relative;

package/livingdocs/120.Startpage/030.teaser-quote/teaser-quote.html

@@ -1,4 +1,9 @@
-<div class="srl-teaser-quote">
+<div
+  class="srl-teaser-quote"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-teaser-quote__alt-text" doc-editable="alt-tag" doc-toggle="show-alt-text"
        data-alt-text-source="alt">
     Write the alt text here (optional, but recommended)

package/livingdocs/120.Startpage/040.teaser/scss/web.scss

@@ -1,12 +1,11 @@
 @use "srl";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 .srl-teaser {
   @extend %srl-breakout-grid-base;
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-teaser__image-container {
   @include srl.grid-media-up(desktop) {

package/livingdocs/120.Startpage/040.teaser/teaser.html

@@ -1,4 +1,9 @@
-<div class="srl-teaser">
+<div
+  class="srl-teaser"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-teaser__alt-text" doc-editable="alt-tag" doc-toggle="show-alt-text"
        data-alt-text-source="alt">
     Write the alt text here (optional, but recommended)

package/livingdocs/130.Hosting_Components/010.download-center/download-center.html

@@ -4,7 +4,7 @@
   data-remove-from-xhtml="complete"
 >
   <div class="srl-download-center" data-remove-from-web="complete">
-    <span class="srl-download-center__editor-text" data-remove-from-pdf="complete">
+    <span class="srl-download-center__editor-text">
       Placeholder for download list
     </span>
   </div>

package/livingdocs/130.Hosting_Components/020.search/scss/web.scss

@@ -96,6 +96,10 @@ Search results
   @include srl.spacer-margin-top(200);
 }
 
+.srl-search-results__nav + * {
+  @include srl.spacer-margin-top(400);
+}
+
 .srl-search-results__list {
   list-style: none;
   margin: 0;

package/livingdocs/130.Hosting_Components/020.search/searchHighlightOnTarget.vue

@@ -242,5 +242,8 @@ onBeforeUnmount(() => {
 .searchTarget {
   background-color: srl.colors-primary-1000();
   color: srl.colors-white-1000();
+  padding: srl.spacer-get(50);
+  text-box-trim: trim-both;
+  border-radius: srl.spacer-get(50);
 }
 </style>

package/livingdocs/999.Properties/background-color/properties.json

@@ -0,0 +1,23 @@
+{
+  "background-color": {
+    "label": "Background color",
+    "type": "select",
+    "options": [
+      {
+        "caption": "None"
+      },
+      {
+        "caption": "Primary",
+        "value": "srl-bg-primary-1000"
+      },
+      {
+        "caption": "Secondary",
+        "value": "srl-bg-secondary-1000"
+      },
+      {
+        "caption": "Tertiary",
+        "value": "srl-bg-tertiary-1000"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.40",
+  "version": "1.0.43",
   "description": "Manage srl templates, build and publish",
   "repository": {
     "url": "https://github.com/mmssolutionsio/simple-reporting-library"

package/scripts/config.js

@@ -29,20 +29,21 @@ export const baseComponentsToInstall = [
   '090.Signatures/020.signature-item',
   '100.Misc/010.anchor',
   '110.PDF/010.pdf-pagebreak',
-  '110.PDF/030.pdf-publication-title',
-  '110.PDF/040.pdf-chapter-title',
-  '110.PDF/070.pdf-cover',
+  '110.PDF/030.pdf-cover',
+  '110.PDF/050.pdf-publication-title',
+  '110.PDF/060.pdf-chapter-title',
   '110.PDF/080.pdf-toc-page',
   '110.PDF/090.pdf-toc-item-title',
   '110.PDF/100.pdf-toc-item',
   '130.Hosting_Components/010.download-center',
   '130.Hosting_Components/020.search',
   '999.Properties/alignment',
+  '999.Properties/font-color',
+  '999.Properties/grid',
   '999.Properties/hide-quote-characters',
   '999.Properties/icon',
   '999.Properties/pdf-spacer',
   '999.Properties/reverse',
-  '999.Properties/grid',
 ];
 
 export const nsWowInternalLddUrl = 'https://nswow-ld.nswow.ch/designs';

package/scss/colors/mixins.scss

@@ -16,6 +16,9 @@
           background-color: functions.get($colorName);
           @if map.has-key(variables.$colors, $onKey) {
             color: functions.get($onKey);
+            * {
+              color: inherit;
+            }
           }
         }
       }

package/scss/helpers/mixins.scss

@@ -41,6 +41,28 @@
   }
 }
 
+@mixin editor-label($text) {
+  position: relative;
+  &:after {
+    content: "#{$text}";
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 4px;
+    margin-left: 4px;
+    border: 1px solid;
+    padding: 2px 7px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+    border-radius: 7px;
+    z-index: 10001;
+    color: rgb(148 148 148);
+    background: rgb(248 248 248);
+    cursor: pointer;
+  }
+}
+
 @mixin core-styles {
   .#{variables.$class-prefix}list-reset {
     @include list-reset;

package/scss/spacer/mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use 'variables';
 @use 'functions';
 @use '../grid';
@@ -124,6 +125,62 @@
   column-gap: functions.get($spacer);
 }
 
+@mixin component-margin($spacing-rules) {
+  @each $pair, $margin in $spacing-rules {
+    $from: list.nth($pair, 1);
+    $to: list.nth($pair, 2);
+
+    @if $to == '*' {
+      #{$from} + * {
+        @include margin-top($margin);
+      }
+    } @else {
+      #{$from} + #{$to} {
+        @include margin-top($margin);
+      }
+    }
+
+    @if system.$build == "pdf" {
+      @if $to == '*' {
+        #{$from} + *,
+        #{$from}-last + * {
+          @include margin-top($margin);
+        }
+      } @else {
+        #{$from} + #{$to},
+        #{$from} + #{$to}-first,
+        #{$from}-last + #{$to},
+        #{$from}-last + #{$to}-first {
+          @include margin-top($margin);
+        }
+      }
+    } @else {
+      $wrappers: null;
+
+      @if system.$build != "xbrl" {
+        $wrappers: ('.srl-nested-container');
+      } @else {
+        $wrappers: ('.srl-nested-container', '.ixbrl-element');
+      }
+      @each $wrapper in $wrappers {
+        @if $to == '*' {
+          #{$from} + #{$wrapper}:has(:first-child),
+          #{$wrapper}:has(#{$from}:last-child) + * {
+            @include margin-top($margin);
+          }
+        } @else {
+          #{$from} + #{$wrapper}:has(#{$to}:first-child),
+          #{$wrapper}:has(#{$from}:last-child) + #{$to},
+          #{$wrapper}:has(#{$from}:first-child) + #{$wrapper}:has(#{$to}:last-child),
+          #{$wrapper}:has(#{$from}:last-child) + #{$wrapper}:has(#{$to}:first-child) {
+            @include margin-top($margin);
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin core-styles {
   @at-root {
     @each $spacer, $spacerValue in variables.$spacer {

package/srl/srl/pdf/PDFNestedContainers.ts

@@ -1,110 +1,122 @@
 export interface PDFNestedContainerMarkerConfig {
-  selector?: string
+  selector?: string;
 }
 
 export class PDFNestedContainers {
-  private containers: NodeListOf<HTMLElement>
+  private containers: NodeListOf<HTMLElement>;
 
-  private excludedClasses = ['srl-grid', 'srl-linkable', 'srl-nested-container']
+  private excludedClasses = [
+    'srl-grid',
+    'srl-linkable',
+    'srl-nested-container',
+    'srl-editor-component',
+    'srl-pdf-columnbreak',
+  ];
 
-  private wrapperClasses = ['srl-grid']
+  private wrapperClasses = ['srl-grid'];
 
   constructor(config: PDFNestedContainerMarkerConfig = {}) {
-    const { selector = '.srl-nested-container' } = config
+    const { selector = '.srl-nested-container' } = config;
 
-    this.containers = document.querySelectorAll(selector)
+    this.containers = document.querySelectorAll(selector);
 
     if (this.containers.length === 0) {
-      return
+      return;
     }
 
-    this.markContainers()
+    this.markContainers();
   }
 
   private markContainers(): void {
     this.containers.forEach((container) => {
-      const firstElement = this.findEdgeElement(container, 'first')
-      const lastElement = this.findEdgeElement(container, 'last')
+      const firstElement = this.findEdgeElement(container, 'first');
+      const lastElement = this.findEdgeElement(container, 'last');
 
-      const firstClass = firstElement ? this.getRelevantClass(firstElement) : null
-      const lastClass = lastElement ? this.getRelevantClass(lastElement) : null
+      const firstClass = firstElement
+        ? this.getRelevantClass(firstElement)
+        : null;
+      const lastClass = lastElement ? this.getRelevantClass(lastElement) : null;
 
       if (firstClass) {
-        container.classList.add(`${firstClass}-first`)
+        container.classList.add(`${firstClass}-first`);
       }
 
       if (lastClass) {
-        container.classList.add(`${lastClass}-last`)
+        container.classList.add(`${lastClass}-last`);
       }
-    })
+    });
   }
 
-  private findEdgeElement(root: HTMLElement, direction: 'first' | 'last'): HTMLElement | null {
-    const children = Array.from(root.children) as HTMLElement[]
-
-    const orderedChildren = direction === 'first' ? children : [...children].reverse()
+  private findEdgeElement(
+    root: HTMLElement,
+    direction: 'first' | 'last',
+  ): HTMLElement | null {
+    const children = Array.from(root.children) as HTMLElement[];
+    const orderedChildren =
+      direction === 'first' ? children : [...children].reverse();
 
     for (const child of orderedChildren) {
+      const relevantClass = this.getRelevantClass(child);
+
+      if (relevantClass) {
+        return child;
+      }
+
       if (this.isLayoutWrapper(child)) {
-        const nestedElement = this.findEdgeElement(child, direction)
+        const nestedElement = this.findEdgeElement(child, direction);
 
         if (nestedElement) {
-          return nestedElement
+          return nestedElement;
         }
 
-        continue
+        continue;
       }
 
-      const relevantClass = this.getRelevantClass(child)
-
-      if (relevantClass) {
-        return child
-      }
-
-      const nestedElement = this.findEdgeElement(child, direction)
+      const nestedElement = this.findEdgeElement(child, direction);
 
       if (nestedElement) {
-        return nestedElement
+        return nestedElement;
       }
     }
 
-    return null
+    return null;
   }
 
   private isLayoutWrapper(el: HTMLElement): boolean {
-    const classes = Array.from(el.classList)
+    const classes = Array.from(el.classList);
 
     if (classes.some((cls) => this.wrapperClasses.includes(cls))) {
-      return true
+      return true;
     }
 
     if (classes.some((cls) => cls.includes('__'))) {
-      return true
+      return true;
     }
 
     if (el.hasAttribute('doc-container') && !this.getRelevantClass(el)) {
-      return true
+      return true;
     }
 
-    return false
+    return false;
   }
 
   private getRelevantClass(el: HTMLElement): string | null {
-    const classes = Array.from(el.classList)
+    const classes = Array.from(el.classList);
 
     const relevant = classes.find((cls) => {
-      if (!cls.startsWith('srl-')) return false
-      if (this.excludedClasses.includes(cls)) return false
-      if (cls.includes('__')) return false
-      if (this.wrapperClasses.includes(cls)) return false
-      if (cls.endsWith('-first')) return false
-      if (cls.endsWith('-last')) return false
-
-      return true
-    })
-
-    return relevant || null
+      if (!cls.startsWith('srl-')) return false;
+      if (this.excludedClasses.includes(cls)) return false;
+      if (cls.includes('__')) return false;
+      if (this.wrapperClasses.includes(cls)) return false;
+      if (cls.endsWith('-first')) return false;
+      if (cls.endsWith('-last')) return false;
+      if (cls.startsWith('srl-text-alignment-')) return false;
+
+      return true;
+    });
+
+    return relevant || null;
   }
 }
 
-export default PDFNestedContainers
+export default PDFNestedContainers;

package/dev/src/assets/scss/margins.scss

@@ -1,59 +0,0 @@
-@use "srl";
-@use "srl/system";
-@use "sass:list";
-
-@mixin srl-component-margin($spacing-rules) {
-  @each $pair, $margin in $spacing-rules {
-    $from: list.nth($pair, 1);
-    $to: list.nth($pair, 2);
-
-    @if $to == '*' {
-      #{$from} + * {
-        @include srl.spacer-margin-top($margin);
-      }
-    } @else {
-      #{$from} + #{$to} {
-        @include srl.spacer-margin-top($margin);
-      }
-    }
-
-    @if system.$build == "pdf" {
-      @if $to == '*' {
-        #{$from} + *,
-        #{$from}-last + * {
-          @include srl.spacer-margin-top($margin);
-        }
-      } @else {
-        #{$from} + #{$to},
-        #{$from} + #{$to}-first,
-        #{$from}-last + #{$to},
-        #{$from}-last + #{$to}-first {
-          @include srl.spacer-margin-top($margin);
-        }
-      }
-    } @else {
-      $wrappers: null;
-
-      @if system.$build != "xbrl" {
-        $wrappers: ('.srl-nested-container');
-      } @else {
-        $wrappers: ('.srl-nested-container', '.ixbrl-element');
-      }
-      @each $wrapper in $wrappers {
-        @if $to == '*' {
-          #{$from} + #{$wrapper}:has(:first-child),
-          #{$wrapper}:has(#{$from}:last-child) + * {
-            @include srl.spacer-margin-top($margin);
-          }
-        } @else {
-          #{$from} + #{$wrapper}:has(#{$to}:first-child),
-          #{$wrapper}:has(#{$from}:last-child) + #{$to},
-          #{$wrapper}:has(#{$from}:first-child) + #{$wrapper}:has(#{$to}:last-child),
-          #{$wrapper}:has(#{$from}:last-child) + #{$wrapper}:has(#{$to}:first-child) {
-            @include srl.spacer-margin-top($margin);
-          }
-        }
-      }
-    }
-  }
-}