@simple-reporting/base 1.0.39 → 1.0.41

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

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = withDefaults(defineProps<{
+  rootSelector?: string
+  highlightClass?: string
+  queryParam?: string
+}>(), {
+  rootSelector: '#srl-page-main',
+  highlightClass: 'searchTarget',
+  queryParam: 'searchTarget'
+})
+
+const route = useRoute()
+
+let mutationObserver: MutationObserver | null = null
+let highlightTimeout: ReturnType<typeof setTimeout> | null = null
+let isApplyingHighlight = false
+let hasScrolledToHighlight = false
+
+function getRootElement(): HTMLElement | null {
+  return document.querySelector(props.rootSelector)
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function removeHighlights(root: HTMLElement): void {
+  const highlights = root.querySelectorAll(`span.${props.highlightClass}`)
+
+  highlights.forEach((highlight) => {
+    const parent = highlight.parentNode
+    if (!parent) return
+
+    parent.replaceChild(document.createTextNode(highlight.textContent ?? ''), highlight)
+    parent.normalize()
+  })
+}
+
+function highlightTextNodes(root: HTMLElement, term: string): number {
+  const safeTermPattern = escapeRegExp(term)
+  const regex = new RegExp(`(${safeTermPattern})`, 'gi')
+
+  const walker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        const parent = node.parentElement
+        if (!parent) return NodeFilter.FILTER_REJECT
+
+        const tag = parent.tagName.toLowerCase()
+        if (
+          tag === 'script' ||
+          tag === 'style' ||
+          tag === 'noscript' ||
+          tag === 'textarea'
+        ) {
+          return NodeFilter.FILTER_REJECT
+        }
+
+        if (parent.closest(`.${props.highlightClass}`)) {
+          return NodeFilter.FILTER_REJECT
+        }
+
+        const text = node.textContent
+        if (!text || !text.trim()) return NodeFilter.FILTER_SKIP
+
+        regex.lastIndex = 0
+        if (!regex.test(text)) return NodeFilter.FILTER_SKIP
+
+        return NodeFilter.FILTER_ACCEPT
+      }
+    }
+  )
+
+  const textNodes: Text[] = []
+  let node: Node | null = null
+
+  while ((node = walker.nextNode())) {
+    textNodes.push(node as Text)
+  }
+
+  let hitCount = 0
+
+  for (const textNode of textNodes) {
+    const text = textNode.textContent ?? ''
+    regex.lastIndex = 0
+
+    const matches = [...text.matchAll(regex)]
+    if (!matches.length) continue
+
+    const fragment = document.createDocumentFragment()
+    let lastIndex = 0
+
+    for (const match of matches) {
+      const matchText = match[0]
+      const index = match.index ?? 0
+
+      if (index > lastIndex) {
+        fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)))
+      }
+
+      const span = document.createElement('span')
+      span.className = props.highlightClass
+      span.textContent = matchText
+      fragment.appendChild(span)
+
+      lastIndex = index + matchText.length
+      hitCount++
+    }
+
+    if (lastIndex < text.length) {
+      fragment.appendChild(document.createTextNode(text.slice(lastIndex)))
+    }
+
+    textNode.parentNode?.replaceChild(fragment, textNode)
+  }
+
+  return hitCount
+}
+
+function scrollToFirstHighlight(root: HTMLElement): void {
+  const firstHighlight = root.querySelector<HTMLElement>(`.${props.highlightClass}`)
+  if (!firstHighlight) return
+
+  firstHighlight.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest'
+  })
+}
+
+function stopObserver(): void {
+  mutationObserver?.disconnect()
+}
+
+function startObserver(): void {
+  const root = getRootElement()
+  if (!root) return
+
+  stopObserver()
+
+  mutationObserver = new MutationObserver(() => {
+    if (isApplyingHighlight) return
+    scheduleHighlight()
+  })
+
+  mutationObserver.observe(root, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+}
+
+function scheduleHighlight(): void {
+  if (highlightTimeout) {
+    clearTimeout(highlightTimeout)
+  }
+
+  highlightTimeout = setTimeout(() => {
+    void applySearchHighlight()
+  }, 0)
+}
+
+async function applySearchHighlight(): Promise<void> {
+  const root = getRootElement()
+  if (!root || isApplyingHighlight) return
+
+  const rawSearchTarget = route.query[props.queryParam]
+  const searchTarget =
+    typeof rawSearchTarget === 'string'
+      ? decodeURIComponent(rawSearchTarget).trim()
+      : ''
+
+  isApplyingHighlight = true
+  stopObserver()
+
+  try {
+    removeHighlights(root)
+
+    if (!searchTarget) {
+      hasScrolledToHighlight = false
+      return
+    }
+
+    await nextTick()
+
+    const hitCount = highlightTextNodes(root, searchTarget)
+
+    if (hitCount > 0 && !hasScrolledToHighlight) {
+      await nextTick()
+      scrollToFirstHighlight(root)
+      hasScrolledToHighlight = true
+    }
+  } finally {
+    isApplyingHighlight = false
+    startObserver()
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  startObserver()
+  await applySearchHighlight()
+})
+
+watch(
+  () => route.fullPath,
+  async () => {
+    hasScrolledToHighlight = false
+    await nextTick()
+    scheduleHighlight()
+  }
+)
+
+watch(
+  () => props.rootSelector,
+  async () => {
+    hasScrolledToHighlight = false
+    await nextTick()
+    startObserver()
+    scheduleHighlight()
+  }
+)
+
+onBeforeUnmount(() => {
+  stopObserver()
+
+  if (highlightTimeout) {
+    clearTimeout(highlightTimeout)
+  }
+})
+</script>
+
+<template />
+
+<style lang="scss">
+@use "srl";
+.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/livingdocs/999.Properties/font-color/properties.json

@@ -0,0 +1,15 @@
+{
+  "font-color": {
+    "label": "Font color",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Default"
+      },
+      {
+        "caption": "white",
+        "value": "srl-color-white-1000"
+      }
+    ]
+  }
+}

package/package.json

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

package/scripts/config.js

@@ -29,18 +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';
@@ -9,27 +10,53 @@
 }
 
 @mixin margin-block($spacer) {
-  margin-block: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-top: functions.get($spacer);
+    margin-bottom: functions.get($spacer);
+  } @else {
+    margin-block: functions.get($spacer);
+  }
 }
 
 @mixin margin-inline($spacer) {
-  margin-inline: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-left: functions.get($spacer);
+    margin-right: functions.get($spacer);
+  } @else {
+    margin-inline: functions.get($spacer);
+  }
 }
 
 @mixin margin-top($spacer) {
-  margin-block-start: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-top: functions.get($spacer);
+  } @else {
+    margin-block-start: functions.get($spacer);
+  }
 }
 
 @mixin margin-right($spacer) {
-  margin-inline-end: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-right: functions.get($spacer);
+  } @else {
+    margin-inline-end: functions.get($spacer);
+  }
 }
 
 @mixin margin-bottom($spacer) {
-  margin-block-end: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-bottom: functions.get($spacer);
+  } @else {
+    margin-block-end: functions.get($spacer);
+  }
 }
 
 @mixin margin-left($spacer) {
-  margin-inline-start: functions.get($spacer);
+  @if system.$build == "word" {
+    margin-left: functions.get($spacer);
+  } @else {
+    margin-inline-start: functions.get($spacer);
+  }
 }
 
 @mixin padding($spacer) {
@@ -37,27 +64,53 @@
 }
 
 @mixin padding-block($spacer) {
-  padding-block: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-top: functions.get($spacer);
+    padding-bottom: functions.get($spacer);
+  } @else {
+    padding-block: functions.get($spacer);
+  }
 }
 
 @mixin padding-inline($spacer) {
-  padding-inline: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-left: functions.get($spacer);
+    padding-right: functions.get($spacer);
+  } @else {
+    padding-inline: functions.get($spacer);
+  }
 }
 
 @mixin padding-top($spacer) {
-  padding-block-start: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-top: functions.get($spacer);
+  } @else {
+    padding-block-start: functions.get($spacer);
+  }
 }
 
 @mixin padding-right($spacer) {
-  padding-inline-end: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-right: functions.get($spacer);
+  } @else {
+    padding-inline-end: functions.get($spacer);
+  }
 }
 
 @mixin padding-bottom($spacer) {
-  padding-block-end: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-bottom: functions.get($spacer);
+  } @else {
+    padding-block-end: functions.get($spacer);
+  }
 }
 
 @mixin padding-left($spacer) {
-  padding-inline-start: functions.get($spacer);
+  @if system.$build == "word" {
+    padding-left: functions.get($spacer);
+  } @else {
+    padding-inline-start: functions.get($spacer);
+  }
 }
 
 @mixin gap($spacer) {
@@ -72,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/fa/index.scss

@@ -63,7 +63,7 @@
   @return 900;
 }
 
-@mixin content($icon, $style: solid) {
+@mixin content($icon, $style: v.$default-style) {
   @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
     @debug "Icon "#{$icon}" not found in Font Awesome 7.";
   } @else {
@@ -88,7 +88,7 @@
   }
 }
 
-@mixin content-before($icon, $style: solid) {
+@mixin content-before($icon, $style: v.$default-style) {
   @if not map.has-key(v.$brand-icons, $icon) and not map.has-key(v.$icons, $icon) {
     @debug "Icon "#{$icon}" not found in Font Awesome 7.";
   } @else {

package/srl/srl/fa/source-free.scss

@@ -8,7 +8,4 @@
 @forward "@fortawesome/fontawesome-free/scss/variables";
 @forward "@fortawesome/fontawesome-free/scss/mixins";
 $type: free;
-$default-style: light;
-@if map.has-key(meta.$meta, icon, default-style) {
-  $default-style: map.get(meta.$meta, icon, default-style);
-}
+$default-style: solid;

package/srl/srl/pdf/PDFNestedContainers.ts

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