@simple-reporting/base 1.0.39 → 1.0.40

package/livingdocs/040.Media/030.video/video.vue

@@ -3,41 +3,80 @@ import { onMounted, ref, useId } from 'vue'
 
 const id = useId()
 const rootEl = ref<HTMLDivElement>()
-const button = ref<HTMLButtonElement>()
-const video = ref<HTMLVideoElement>()
+const button = ref<HTMLButtonElement | null>(null)
+const thumbnail = ref<HTMLImageElement | null>(null)
+const video = ref<HTMLVideoElement | null>(null)
+const iframe = ref<HTMLIFrameElement | null>(null)
+const iframeSrc = ref<string | null>(null)
 
 onMounted(() => {
-  video.value = rootEl.value?.querySelector('video') || undefined
+  button.value = rootEl.value?.querySelector('button') || null
+  if (button.value) {
+    const buttonEl = button.value as HTMLButtonElement
+    const label = buttonEl.textContent || 'Play Video'
+    buttonEl.setAttribute('aria-label', label)
+    buttonEl.setAttribute('title', label)
+    buttonEl.setAttribute('aria-controls', id)
+  }
+
+  thumbnail.value = rootEl.value?.querySelector('.srl-video__thumbnail') || null
+
+  video.value = rootEl.value?.querySelector('video') || null
   if (video.value) {
-    video.value.id = id
-    video.value.playsInline = true
-    video.value.controls = true
-    video.value.tabIndex = -1
-    button.value = rootEl.value?.querySelector('button') || undefined
-    if (button.value) {
-      const label = button.value.textContent || 'Play Video'
-      button.value.setAttribute('aria-label', label)
-      button.value.setAttribute('title', label)
-      button.value.setAttribute('aria-controls', id)
-      button.value.addEventListener('click', () => {
-        rootEl.value?.classList.add('srl-video__started')
-        if (video.value) {
-          video.value.tabIndex = 0
-        }
-
-        if (button.value) {
-          button.value.setAttribute('aria-hidden', 'true')
-          button.value.setAttribute('tabindex', '-1')
-        }
-
-        const thumbnail = rootEl.value?.querySelector('.srl-video__thumbnail') as HTMLImageElement
-        if (thumbnail) {
-          thumbnail.ariaHidden = 'true'
-        }
-        video.value?.focus()
-        video.value?.play()
-      })
-    }
+    const videoEl = video.value as HTMLVideoElement
+    videoEl.id = id
+    videoEl.playsInline = true
+    videoEl.controls = true
+    videoEl.tabIndex = -1
+  }
+
+  iframe.value = rootEl.value?.querySelector('iframe') || null
+  if (iframe.value) {
+    const iframeEl = iframe.value as HTMLIFrameElement
+    iframeSrc.value = iframeEl.getAttribute('src')
+    iframeEl.removeAttribute('src')
+    iframeEl.id = id
+    iframeEl.tabIndex = -1
+  }
+
+  if (
+    button.value
+    && thumbnail.value
+    && (
+      video.value
+      || (
+        iframe.value
+        && iframeSrc.value
+      )
+    )
+  ) {
+    const buttonEl = button.value as HTMLButtonElement
+    const thumbnailEl = thumbnail.value as HTMLImageElement
+    buttonEl.addEventListener('click', () => {
+      rootEl.value?.classList.add('srl-video__started')
+
+      buttonEl.setAttribute('aria-hidden', 'true')
+      buttonEl.setAttribute('tabindex', '-1')
+
+      if (video.value) {
+        const videoEl = video.value as HTMLVideoElement
+        videoEl.tabIndex = 0
+        videoEl.focus()
+        videoEl.play()
+      } else if (iframe.value && iframeSrc.value) {
+        const iframeEl = iframe.value as HTMLVideoElement
+        const iframeSrcString = iframeSrc.value as string
+        const seperator = iframeSrcString.includes('?') ? '&' : '?'
+        iframeEl.setAttribute(
+          'src',
+          `${iframeSrcString}${seperator}autoplay=1`
+        )
+        iframeEl.tabIndex = 0
+        iframeEl.focus()
+      }
+
+      thumbnailEl.setAttribute('hidden', '')
+    })
   }
 })
 </script>

package/livingdocs/060.Buttons/020.button/scss/general.scss

@@ -15,11 +15,11 @@
   }
 
   .srl-button-icon-arrow-left-before & {
-    @include fa.icon(chevron-left);
+    @include fa.icon(arrow-left);
   }
 
   .srl-button-icon-arrow-right-after & {
-    @include fa.icon(chevron-right);
+    @include fa.icon(arrow-right);
   }
 
   .srl-button-icon-download-after & {

package/livingdocs/070.Container/010.aside-content-container/scss/pdf.scss

@@ -1,3 +1,18 @@
+@use 'srl';
+@use "sass:map";
+
 .srl-aside-content-container {
   justify-content: space-between;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.srl-aside-content-container__aside {
+  &:before {
+    content: "";
+    display: block;
+    background: srl.colors-grey-200();
+    height: srl.system-size-unit(1pt);
+    width: srl.system-size-unit(80pt);
+  }
 }

package/livingdocs/070.Container/010.aside-content-container/scss/web.scss

@@ -1 +1,5 @@
 @use "srl";
+
+.srl-aside-content-container {
+  gap: srl.spacer-get(200);
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+@use "srl";
+
+.srl-columns__column {
+  flex: 1 0 0;
+}

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

@@ -0,0 +1,8 @@
+@use "srl";
+@use "@/assets/scss/margins";
+
+@include srl.system-add-root-style(srl-model-flex-direction, row);
+
+.srl-columns__column * {
+  width: 100%;
+}

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

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

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

@@ -0,0 +1 @@
+@use "pdf";

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

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

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

@@ -1 +1,10 @@
-@use "web";
+@use "srl";
+@use "web";
+
+.srl-cv {
+  display: block;
+}
+
+.srl-cv__button-container {
+  @include srl.spacer-margin-block(400);
+}

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

@@ -24,7 +24,7 @@
   margin: 0;
   padding: 0;
   position: relative;
-  top: calc((srl.spacer-get(150) + (#{srl.typography-get-line-height(button-text)}) / 2) * -1);
+  top: calc((var(--srl-button-height, unset) - 7px) / 2 * -1);
   z-index: -1;
   border-top: 0;
   border-bottom: 1px solid srl.colors-grey-200();

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

@@ -9,6 +9,4 @@ $margins: (
   ('.srl-cv-time-span', '.srl-title-h4'): 400,
   ('.srl-cv-time-span', '.srl-title-h5'): 400,
   ('.srl-cv-time-span', '.srl-title-h6'): 400,
-  ('.srl-cv-time-span', '.srl-pdf-pagebreak'): 800,
-  ('.srl-cv-time-span', '.srl-anchor'): 800,
 )

package/livingdocs/100.Misc/010.anchor/scss/editor.scss

@@ -1,6 +1,10 @@
 @use 'srl';
 @use 'web';
 
+.srl-anchor {
+  @include srl.spacer-margin-block(1600);
+}
+
 .srl-anchor__text {
   @extend %srl-regular-width;
   @include srl.typography-pdf-header()

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

@@ -1,42 +1,42 @@
 <srl-ld-accordion class="srl-category-accordion srl-category-accordion--category"
   data-remove-from-pdf="transient"
   data-remove-from-word="transient"
-  data-remove-from-xbrl="transient"
+  data-remove-from-xhtml="transient"
 >
   <div class="srl-category-accordion__inner"
     data-remove-from-web="transient"
     data-remove-from-pdf="transient"
     data-remove-from-word="transient"
-    data-remove-from-xbrl="transient"
+    data-remove-from-xhtml="transient"
   >
     <div class="srl-category-accordion__inner-head"
       data-remove-from-web="transient"
       data-remove-from-pdf="transient"
       data-remove-from-word="transient"
-      data-remove-from-xbrl="transient"
+      data-remove-from-xhtml="transient"
     >
       <div class="srl-category-accordion__head"
         data-remove-from-web="transient"
         data-remove-from-pdf="transient"
         data-remove-from-word="transient"
-        data-remove-from-xbrl="transient"
+        data-remove-from-xhtml="transient"
       >
         <div class="srl-category-accordion__head--btn"
           data-remove-from-web="transient"
           data-remove-from-pdf="transient"
           data-remove-from-word="transient"
-          data-remove-from-xbrl="transient"
+          data-remove-from-xhtml="transient"
         >
           <template-header doc-container="header"
             data-remove-from-pdf="transient"
             data-remove-from-word="transient"
-            data-remove-from-xbrl="transient"
+            data-remove-from-xhtml="transient"
           ></template-header>
           <span class="srl-category-accordion__icon"
             data-remove-from-web="complete"
             data-remove-from-pdf="complete"
             data-remove-from-word="complete"
-            data-remove-from-xbrl="complete"
+            data-remove-from-xhtml="complete"
           ></span>
         </div>
       </div>
@@ -45,12 +45,12 @@
       data-remove-from-web="transient"
       data-remove-from-pdf="transient"
       data-remove-from-word="transient"
-      data-remove-from-xbrl="transient"
+      data-remove-from-xhtml="transient"
     >
       <template-content class="srl-category-accordion__content-inner" doc-container="content"
         data-remove-from-pdf="transient"
         data-remove-from-word="transient"
-        data-remove-from-xbrl="transient"
+        data-remove-from-xhtml="transient"
       ></template-content>
     </div>
   </div>

package/livingdocs/110.PDF/010.pdf-pagebreak/scss/editor.scss

@@ -3,6 +3,7 @@
 
 .srl-pdf-pagebreak {
   text-align: center;
+  @include srl.spacer-margin-block(1600);
 }
 
 .srl-pdf-pagebreak__editor-text {

package/livingdocs/110.PDF/021.pdf-columnbreak/scss/editor.scss

@@ -3,6 +3,7 @@
 
 .srl-pdf-columnbreak {
   text-align: center;
+  @include srl.spacer-margin-block(1600);
 }
 
 .srl-pdf-columnbreak__editor-text {

package/livingdocs/110.PDF/070.pdf-cover/properties.json

@@ -7,8 +7,8 @@
         "caption": "Normal"
       },
       {
-        "caption": "Black",
-        "value": "srl-cover--font-color-black"
+        "caption": "White",
+        "value": "srl-color-white-1000"
       },
       {
         "caption": "Primary",

package/livingdocs/110.PDF/070.pdf-cover/scss/general.scss

@@ -20,3 +20,6 @@ $page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
   justify-content: space-between;
 }
 
+.srl-pdf-cover__logo {
+  max-width: 118pt;
+}

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

@@ -8,19 +8,17 @@
   border-top: srl.system-size-unit(1pt) solid srl.colors-black-1000();
   text-decoration: none;
   @include srl.typography-toc-item();
+  color: srl.colors-black-1000();
 }
 
 .srl-pdf-toc__text {
   width: calc(100% - srl.system-size-unit(24pt) - srl.spacer-get(100));
+}
 
-  &:after {
-    .srl-pdf-toc__link:not([href]) & {
-      content: "No link provided";
-      color: #FF0000;
-      display: inline-block;
-      margin-left: srl.spacer-get(100)
-    }
-  }
+.srl-pdf-toc__item:not([href]) .srl-pdf-toc__text:after {
+  content: 'No link provided';
+  color: #ff0000;
+  display: block;
 }
 
 .srl-pdf-toc__page-number {

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

@@ -0,0 +1,10 @@
+<div class="srl-hero-video">
+  <div class="srl-hero-video__video-container" doc-html="free-html">
+
+  </div>
+  <div class="srl-hero-video__content-container">
+    <h1 class="srl-title-h1 srl-linkable">
+      <span class="srl-title-h1__text" doc-editable="title-h1">Geschäftsbericht 2025</span>
+    </h1>
+  </div>
+</div>

package/livingdocs/120.Startpage/010.hero-video/ld-conf.json

@@ -0,0 +1,5 @@
+{
+  "name": "hero-video",
+  "label": "Hero video",
+  "properties": [ "font-color" ]
+}

package/livingdocs/120.Startpage/010.hero-video/properties.json

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

package/livingdocs/120.Startpage/010.hero-video/scss/_spacing-variations.scss

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

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

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

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

@@ -0,0 +1,9 @@
+@use "srl";
+@use "web";
+
+.srl-hero-video {
+  height: 100%;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: srl.colors-primary-1000();
+}

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

@@ -0,0 +1,78 @@
+@use "srl";
+@use "@/assets/scss/margins";
+@use "spacing-variations";
+
+.srl-hero-video {
+  @extend %srl-breakout-grid-base;
+
+  @include srl.grid-media-up(tablet-ls) {
+    gap: var(--srl-gutter-column-gap);
+  }
+}
+
+@include margins.srl-component-margin(spacing-variations.$margins);
+
+.srl-hero-video__video-container {
+  position: relative;
+  z-index: 0;
+  overflow: clip;
+  width: 100vw;
+  grid-row: 1;
+  grid-column: full-start / full-end;
+  overflow: hidden;
+  max-height: calc(100dvh - var(--srl-header-height, 0px));
+  aspect-ratio: 10 / 16;
+
+  @include srl.grid-media-up(tablet-pt) {
+    aspect-ratio: 834 / 702;
+    width: 100%;
+  }
+
+  @include srl.grid-media-up(desktop-large) {
+    aspect-ratio: inherit;
+  }
+}
+
+.srl-hero-video__video {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.srl-hero-video__video--mobile {
+  @include srl.grid-media-up(tablet-pt) {
+    display: none;
+  }
+}
+
+.srl-hero-video__video--desktop {
+  display: none;
+
+  @include srl.grid-media-up(tablet-pt) {
+    display: block;
+  }
+}
+
+.srl-hero-video__content-container {
+  padding: 0 var(--srl-container-padding, unset) var(--srl-container-padding, unset);
+  grid-column: content-start / content-end;
+  display: grid;
+  grid-template-columns: subgrid;
+  position: relative;
+  grid-row: 1;
+  align-self: end;
+
+  @include srl.grid-media-up(tablet-ls) {
+    padding: 0 0 var(--srl-container-padding, unset);
+  }
+
+  @include srl.grid-media-up(desktop-large) {
+    padding-bottom: srl.spacer-get(800);
+  }
+
+  > * {
+    grid-column: inherit;
+  }
+}

package/livingdocs/120.Startpage/020.teaser-title-image-quote/ld-conf.json

@@ -0,0 +1,18 @@
+{
+  "name": "teaser-title-image-quote",
+  "label": "Teaser title/image/quote",
+  "properties": [
+    "icon"
+  ],
+  "directives": {
+    "show-alt-text": {
+      "type": "toggle",
+      "label": "Show alt text",
+      "default": false
+    },
+    "image": {
+      "imageRatios": ["1:1", "3:2", "4:3", "16:9"],
+      "allowOriginalRatio": true
+    }
+  }
+}

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

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

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

@@ -0,0 +1,4 @@
+$margins: (
+  ('.srl-title-image-quote', '*'): 3200,
+  ('.srl-title-image-quote__title-container', '*'): 400
+)

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

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

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

@@ -0,0 +1,22 @@
+@use "srl";
+@use "web";
+
+.srl-title-image-quote__alt-text {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(6, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+}

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

@@ -0,0 +1,41 @@
+@use "srl";
+@use "@/assets/scss/margins";
+@use "spacing-variations";
+
+@include margins.srl-component-margin(spacing-variations.$margins);
+
+.srl-title-image-quote__title-container {
+  @extend %srl-wide-width;
+}
+
+.srl-title-image-quote__image-content-container {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / calc(var(--srl-gutter-columns) + 1);
+  row-gap: srl.spacer-get(200);
+}
+
+.srl-title-image-quote__image-container,
+.srl-title-image-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);
+
+  // Tablet landscape
+  @include srl.grid-col(6, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+
+  @include srl.grid-media-up(tablet-ls) {
+    grid-row: 1;
+  }
+}

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

@@ -0,0 +1,45 @@
+<div class="srl-grid srl-title-image-quote">
+  <div class="srl-title-image-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-title-image-quote__image-content-container">
+    <div class="srl-title-image-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-title-image-quote__image-container">
+      <img doc-image="image" data-alt-text-target="alt">
+    </div>
+    <div class="srl-title-image-quote__content-container">
+      <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 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/030.teaser-quote/ld-conf.json

@@ -0,0 +1,25 @@
+{
+  "name": "teaser-quote",
+  "label": "Teaser quote",
+  "properties": [
+    "icon",
+    "reverse",
+    "hide-quote-characters",
+    "font-color"
+  ],
+  "directives": {
+    "show-alt-text": {
+      "type": "toggle",
+      "label": "Show alt text",
+      "default": false
+    },
+    "image-mobile": {
+      "imageRatios": ["393:702"],
+      "allowOriginalRatio": false
+    },
+    "image": {
+      "imageRatios": ["16:9"],
+      "allowOriginalRatio": false
+    }
+  }
+}

package/livingdocs/120.Startpage/030.teaser-quote/properties.json

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

package/livingdocs/120.Startpage/030.teaser-quote/scss/_spacing-variations.scss

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