@simple-reporting/base 1.0.39 → 1.0.40

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

@@ -0,0 +1,2 @@
+@use "srl";
+@use "web";

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

@@ -0,0 +1,6 @@
+@use "srl";
+@use "web";
+
+.srl-teaser-quote__alt-text {
+  grid-column: content-start / content-end;
+}

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

@@ -0,0 +1,126 @@
+@use "srl";
+@use "@/assets/scss/margins";
+@use "spacing-variations";
+
+@include margins.srl-component-margin(spacing-variations.$margins);
+
+.srl-teaser-quote {
+  position: relative;
+  @extend %srl-breakout-grid-base;
+}
+
+.srl-teaser-quote__image-container {
+  aspect-ratio: 393 / 702;
+
+  @include srl.grid-media-up(tablet-pt) {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 834 / 702;
+    overflow: clip;
+    grid-row: 1;
+    grid-column: full-start / full-end;
+  }
+
+  @include srl.grid-media-up(desktop-large) {
+    aspect-ratio: 1728 / 702;
+  }
+}
+
+.srl-teaser-quote__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.srl-teaser-quote__image-container:has(.srl-teaser-quote__image--mobile) {
+  .srl-teaser-quote__image--desktop {
+    display: none;
+  }
+
+  .srl-teaser-quote__image--mobile {
+    display: block;
+  }
+
+  @include srl.grid-media-up(tablet-pt) {
+    .srl-teaser-quote__image--desktop {
+      display: block;
+    }
+    .srl-teaser-quote__image--mobile {
+      display: none;
+    }
+  }
+}
+
+.srl-teaser-quote__title-container,
+.srl-teaser-quote__content-container {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+}
+
+.srl-teaser-quote__content-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: var(--srl-container-padding, unset);
+  margin-bottom: var(--srl-container-padding, unset);
+  padding-inline: var(--srl-container-padding);
+
+  @include srl.grid-media-up(tablet-ls) {
+    padding-inline: 0;
+    grid-column: content-start / content-end;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    grid-row: 1;
+    margin-top: srl.system-size-unit(106);
+    margin-bottom: srl.system-size-unit(106);
+  }
+
+  @include srl.grid-media-up(desktop) {
+    margin-top: srl.spacer-get(800);
+    margin-bottom: srl.spacer-get(800);
+  }
+}
+
+.srl-teaser-quote__content {
+  padding: srl.spacer-get(300);
+
+  @include srl.grid-media-up(tablet-ls) {
+    align-self: end;
+    grid-column: col 4 / content-end;
+  }
+
+  @include srl.grid-media-up(desktop) {
+    align-self: end;
+    z-index: 1;
+    grid-column: col 7 / content-end;
+    border-radius: 16px;
+
+    .srl-reverse & {
+      grid-column: content-start / col 7;
+    }
+  }
+}
+
+.srl-teaser-quote__title-container {
+  @include srl.grid-media-up(tablet-ls) {
+    grid-column: content-start / content-end;
+  }
+}

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

@@ -0,0 +1,48 @@
+<div class="srl-teaser-quote">
+  <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)
+  </div>
+
+  <div class="srl-teaser-quote__image-container">
+    <img class="srl-teaser-quote__image srl-teaser-quote__image--desktop" doc-image="image" data-alt-text-target="alt">
+    <img class="srl-teaser-quote__image srl-teaser-quote__image--mobile" doc-image="image-mobile" data-alt-text-target="alt">
+  </div>
+
+  <div class="srl-teaser-quote__content-container">
+    <div class="srl-teaser-quote__title-container">
+      <h2 class="srl-title-h2">
+        <span class="srl-title-h2__number-text-container">
+          <span class="srl-title-h2__text" doc-editable="title-h2">
+            Continually coordinate interactive infrastructures for goal-oriented
+          </span>
+        </span>
+      </h2>
+    </div>
+    <div class="srl-teaser-quote__content srl-bg-sand-1000">
+      <blockquote class="srl-quote">
+        <div class="srl-quote__text">
+          <p class="srl-quote__quote srl-linkable" doc-editable="quote-text">
+            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+          </p>
+          <cite class="srl-quote__cite">
+            <p class="srl-quote__name" doc-editable="quote-name" doc-optional>
+              Max Mustermann
+            </p>
+            <p class="srl-quote__position" doc-editable="quote-position" doc-optional>
+              CEO
+            </p>
+          </cite>
+        </div>
+      </blockquote>
+      <div class="srl-button-container">
+        <div class="srl-button-container__inner">
+          <a doc-link="href" class="srl-button srl-button-icon-arrow-right-after">
+            <i class="srl-button__icon srl-icon srl-icon-arrow-right" aria-hidden="true"></i>
+            <span class="srl-button__text" doc-editable="button-text">Button</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/livingdocs/120.Startpage/040.teaser/ld-conf.json

@@ -0,0 +1,23 @@
+{
+  "name": "teaser",
+  "label": "Teaser",
+  "properties": [
+    "icon",
+    "reverse"
+  ],
+  "directives": {
+    "show-alt-text": {
+      "type": "toggle",
+      "label": "Show alt text",
+      "default": false
+    },
+    "image-mobile": {
+      "imageRatios": ["16:9"],
+      "allowOriginalRatio": false
+    },
+    "image": {
+      "imageRatios": ["16:9"],
+      "allowOriginalRatio": false
+    }
+  }
+}

package/livingdocs/120.Startpage/040.teaser/scss/_spacing-variations.scss

@@ -0,0 +1,3 @@
+$margins: (
+  ('.srl-teaser', '*'): 3200,
+)

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

@@ -0,0 +1,2 @@
+@use "srl";
+@use "web";

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

@@ -0,0 +1,6 @@
+@use "srl";
+@use "web";
+
+.srl-teaser__alt-text {
+  grid-column: content-start / content-end;
+}

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

@@ -0,0 +1,73 @@
+@use "srl";
+@use "@/assets/scss/margins";
+@use "spacing-variations";
+
+.srl-teaser {
+  @extend %srl-breakout-grid-base;
+}
+
+@include margins.srl-component-margin(spacing-variations.$margins);
+
+.srl-teaser__image-container {
+  @include srl.grid-media-up(desktop) {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 16 / 9;
+    overflow: clip;
+    grid-row: 1;
+    grid-column: full-start / col 11;
+
+    .srl-reverse & {
+      grid-column: col 3 / full-end;
+    }
+  }
+}
+
+.srl-teaser__image-container:has(.srl-teaser__image--mobile) {
+  .srl-teaser__image--desktop {
+    display: none;
+  }
+
+  .srl-teaser__image--mobile {
+    display: block;
+  }
+
+  @include srl.grid-media-up(tablet-pt) {
+    .srl-teaser__image--desktop {
+      display: block;
+    }
+    .srl-teaser__image--mobile {
+      display: none;
+    }
+  }
+}
+
+.srl-teaser__content-container {
+  @include srl.grid-media-up(desktop) {
+    margin: 0;
+    padding: 0;
+    grid-column: content-start / content-end;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    grid-row: 1;
+  }
+}
+
+.srl-teaser__content {
+  padding: var(--srl-container-padding, unset);
+  width: auto;
+  grid-column-end: span 4;
+
+  @include srl.grid-media-up(desktop) {
+    padding: var(--srl-spacer-300, unset);
+    border-radius: 16px;
+    align-self: center;
+    z-index: 1;
+    grid-column: col 6 / content-end;
+
+    .srl-reverse & {
+      grid-column: content-start / col 8;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="srl-teaser">
+  <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)
+  </div>
+
+  <div class="srl-teaser__image-container">
+    <img class="srl-teaser__image srl-teaser__image--desktop" doc-image="image" data-alt-text-target="alt">
+    <img class="srl-teaser__image srl-teaser__image--mobile" doc-image="image-mobile" data-alt-text-target="alt">
+  </div>
+
+  <div class="srl-teaser__content-container">
+    <div class="srl-teaser__content srl-bg-sand-1000">
+      <h2 class="srl-title-h2">
+        <span class="srl-title-h2__number-text-container">
+          <span class="srl-title-h2__text" doc-editable="title-h2">Vorsorge</span>
+        </span>
+      </h2>
+      <div class="srl-lead">
+        <p class="srl-lead__text" doc-editable="lead">
+          Lorem ipsum dolor sit amet, consete ur sadipscing elitr, sed diam nonumy.
+        </p>
+      </div>
+      <div class="srl-button-container">
+        <div class="srl-button-container__inner">
+          <a doc-link="href" class="srl-button srl-button-icon-arrow-right-after">
+            <i class="srl-button__icon srl-icon srl-icon-arrow-right" aria-hidden="true"></i>
+            <span class="srl-button__text" doc-editable="button-text">Button</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,8 @@
-<srl-ld-download-center>
+<srl-ld-download-center
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  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">
       Placeholder for download list

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

@@ -16,12 +16,16 @@ Search form
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  background-color: srl.colors-grey-600();
+  background-color: srl.colors-white-1000();
+  border: 1px solid srl.colors-grey-200();
   border-radius: srl.system-root-style(srl-default-border-radius);
   overflow: hidden;
 
   &:hover {
     @extend %srl-button__switch-hover;
+    //background: srl.colors-white-1000();
+
+    /*
     background-color: srl.colors-secondary-1000();
     .srl-search-form__button {
       background-color: srl.colors-secondary-1000();
@@ -31,48 +35,13 @@ Search form
         color: srl.colors-grey-800();
       }
     }
+    */
   }
 
   &:has(input:focus) {
+    background: srl.colors-sand-600();
     @extend %srl-button__switch-focus;
-    background-color: srl.colors-secondary-1000();
-    .srl-search-form__input {
-      color: srl.colors-primary-1000();
-      &::placeholder {
-        color: srl.colors-primary-800();
-      }
-    }
-    .srl-search-form__button {
-      background-color: srl.colors-secondary-1000();
-      border-color: srl.colors-primary-1000();
-
-      svg {
-        color: srl.colors-primary-1000();
-      }
-    }
   }
-
-  /*
-  &:has(input:focus-visible) {
-    background-color: srl.colors-primary-200();
-    border: srl.system-size-unit(1) solid srl.colors-primary-1000();
-    .srl-search-form__input {
-      color: srl.colors-grey-600();
-      &::placeholder {
-        color: srl.colors-grey-400();
-      }
-    }
-    .srl-search-form__button {
-      background-color: srl.colors-primary-200();
-      border-color: srl.colors-grey-600();
-
-      svg {
-        color: srl.colors-grey-600();
-      }
-    }
-  }
-
-   */
 }
 
 .srl-search-form__label {
@@ -118,12 +87,6 @@ Search form
 .srl-search-form__button {
   position: absolute;
   right: srl.spacer-get(400);
-  background-color: srl.colors-grey-600();
-  border-color: srl.colors-grey-800();
-
-  svg {
-    color: srl.colors-grey-800();
-  }
 }
 
 /*

package/livingdocs/130.Hosting_Components/020.search/search.html

@@ -1,4 +1,10 @@
-<srl-ld-search use-auto-search use-more-results>
+<srl-ld-search
+  use-auto-search
+  use-more-results
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-search" data-remove-from-web="complete">
     <span class="srl-search__editor-text">
       Placeholder for search form

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

@@ -391,7 +391,7 @@ function setWindowState(index: number) {
           />
           <button
             tabindex="-2"
-            class="srl-button srl-button--icon"
+            class="srl-search-form__button srl-button srl-button--icon"
             type="button"
             :aria-label="$t('search.search')"
             @click="submitSearch"

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

@@ -0,0 +1,246 @@
+<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();
+}
+</style>