@simple-reporting/base 1.0.39 → 1.0.41

package/livingdocs/020.Text/060.quote-with-portrait/scss/general.scss

@@ -1,6 +1,5 @@
 @use 'srl';
 @use "sass:map";
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 $quote-open: map.get(srl.$meta, quote, quote-open);
@@ -11,7 +10,7 @@ $quote-close: map.get(srl.$meta, quote, quote-close);
   row-gap: srl.spacer-get(400);
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-quote__img {
   border-radius: 50%;
@@ -20,6 +19,10 @@ $quote-close: map.get(srl.$meta, quote, quote-close);
 .srl-quote__quote {
   @include srl.typography-quote();
 
+  .srl-teaser-quote.srl-color-white-1000 & {
+    color: srl.colors-black-1000()
+  }
+
   &:before {
     content: "#{$quote-open}";
 
@@ -44,8 +47,16 @@ $quote-close: map.get(srl.$meta, quote, quote-close);
 
 .srl-quote__name {
   @include srl.typography-quote-name();
+
+  .srl-teaser-quote.srl-color-white-1000 & {
+    color: srl.colors-black-1000()
+  }
 }
 
 .srl-quote__position {
     @include srl.typography-quote-position();
+
+  .srl-teaser-quote.srl-color-white-1000 & {
+    color: srl.colors-black-1000()
+  }
 }

package/livingdocs/020.Text/060.quote-with-portrait/scss/web.scss

@@ -21,3 +21,10 @@
 }
 
 
+.srl-quote__quote {
+  .srl-title-image-quote &,
+  .srl-teaser-quote & {
+    @include srl.typography-title-h2-landing-page();
+  }
+}
+

package/livingdocs/020.Text/070.footnote-container/scss/_spacing-variations.scss

@@ -16,7 +16,5 @@ $margins: (
   ('.srl-footnote', '.srl-title-h4'): 400,
   ('.srl-footnote', '.srl-title-h5'): 200,
   ('.srl-footnote', '.srl-title-h6'): 200,
-  ('.srl-footnote', '.srl-pdf-pagebreak'): 800,
-  ('.srl-footnote', '.srl-anchor'): 800,
   ('.srl-footnote', '.srl-background-container'): 1600,
 )

package/livingdocs/020.Text/080.footnote-item/scss/general.scss

@@ -1,6 +1,5 @@
 @use 'srl';
 @use 'sass:map';
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
@@ -15,7 +14,7 @@ $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
   @include srl.typography-footnote-text();
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-footnote__key,
 .srl-footnote__number {

package/livingdocs/020.Text/080.footnote-item/scss/word.scss

@@ -3,4 +3,12 @@
 .srl-footnote:not(.srl-grid),
 .srl-footnote__item {
   font-family: 'Arial', sans-serif;
+}
+
+.srl-footnote__key,
+.srl-footnote__number {
+  &:after {
+    content: " ";
+    display: block;
+  }
 }

package/livingdocs/030.Lists/010.unordered-list/scss/_spacing-variations.scss

@@ -16,7 +16,5 @@ $margins: (
   ('.srl-list-group', '.srl-title-h4'): 400,
   ('.srl-list-group', '.srl-title-h5'): 200,
   ('.srl-list-group', '.srl-title-h6'): 200,
-  ('.srl-list-group', '.srl-pdf-pagebreak'): 800,
-  ('.srl-list-group', '.srl-anchor'): 800,
   ('.srl-list-group', '.srl-background-container'): 1600,
 )

package/livingdocs/030.Lists/010.unordered-list/scss/general.scss

@@ -1,5 +1,4 @@
 @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);

package/livingdocs/030.Lists/040.list-item-unordered-list/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-list-group__item-inner {
   @include srl.typography-list();

package/livingdocs/040.Media/010.table/scss/_spacing-variations.scss

@@ -12,8 +12,6 @@ $margins: (
   ('.srl-table > table', '*'): 200,
   ('.srl-table-container', '*:empty'): 0,
   ('.srl-table > table', '*:empty'): 0,
-  ('.srl-table', '.srl-pdf-pagebreak'): 800,
-  ('.srl-table', '.srl-anchor'): 800,
   ('.srl-table', '.srl-quote'): 800,
   ('.srl-table', '.srl-background-container'): 1600,
 )

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

@@ -1,6 +1,5 @@
 @use 'srl';
 @use 'sass:map';
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 $table-border-regular: map.get(srl.$meta, table, border, regular);
@@ -15,7 +14,7 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
   display: block;
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-table__container {
   overflow: auto;
@@ -24,6 +23,13 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
 
   & > div {
     @extend %srl-grid-base;
+
+    .srl-nested-container & {
+      width: 100%;
+      display: block;
+      padding: 0;
+      margin: 0;
+    }
   }
 }
 

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

@@ -2,6 +2,24 @@
 
 .srl-table {
   page-break-inside: avoid;
+  width: 100%;
+  min-width: 100%;
+
+  div {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+.srl-table__container {
+  & > div {
+    @extend %srl-grid-reset;
+  }
+}
+
+table {
+  width: 100%;
+  min-width: 100%;
 }
 
 th,

package/livingdocs/040.Media/020.image/scss/_spacing-variations.scss

@@ -1,7 +1,5 @@
 $margins: (
   ('.srl-image', '*'): 800,
   ('.srl-image', '.srl-columns'): 400,
-  ('.srl-image', '.srl-pdf-pagebreak'): 800,
-  ('.srl-image', '.srl-anchor'): 800,
   ('.srl-image', '.srl-background-container'): 1600,
 )

package/livingdocs/040.Media/020.image/scss/general.scss

@@ -1,5 +1,4 @@
 @use 'srl';
-@use "@/assets/scss/margins";
 @use "spacing-variations";
 
 .srl-grid--media {
@@ -8,7 +7,7 @@
   }
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-image__caption {
   @include srl.spacer-margin-top(100);

package/livingdocs/040.Media/020.image/scss/pdf.scss

@@ -13,6 +13,7 @@ $page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
 }
 
 .srl-image__image-container {
+  .srl-nested-container &,
   .srl-full-width & {
     width: 100%;
   }

package/livingdocs/040.Media/020.image/scss/web.scss

@@ -1,15 +1,29 @@
 @use "srl";
 
 .srl-image__image-container--desktop {
+  display: block;
+}
+
+.srl-image__image-container--mobile {
   display: none;
+}
 
-  @include srl.grid-media-up(tablet-pt) {
+.srl-image:has(.srl-image__image-container--mobile) {
+  .srl-image__image-container--desktop {
+    display: none;
+  }
+
+  .srl-image__image-container--mobile {
     display: block;
   }
-}
 
-.srl-image__image-container--mobile {
-  @include srl.grid-media-up(tablet-pt) {
-    display: none;
+  @include srl.grid-media-up(tablet-ls) {
+    .srl-image__image-container--desktop {
+      display: block;
+    }
+
+    .srl-image__image-container--mobile {
+      display: none;
+    }
   }
 }

package/livingdocs/040.Media/030.video/ld-conf.json

@@ -1,17 +1,12 @@
 {
   "name": "video",
   "label": "Video",
-  "properties": ["width-all", "pdf-spacer"],
+  "properties": ["showVideoLink", "width-all", "pdf-spacer"],
   "directives": {
     "video-thumbnail": {
       "imageRatios": ["16:9"],
       "allowOriginalRatio": false
     },
-    "showVideoLink": {
-      "type": "toggle",
-      "label": "Enable video link for PDF",
-      "default": false
-    },
     "link": {
       "plainText": true
     },

package/livingdocs/040.Media/030.video/properties.json

@@ -0,0 +1,7 @@
+{
+  "showVideoLink": {
+    "type": "option",
+    "label": "Enable video link for PDF",
+    "value": "srl-video-show-pdf-link"
+  }
+}

package/livingdocs/040.Media/030.video/scss/_spacing-variations.scss

@@ -1,7 +1,5 @@
 $margins: (
   ('.srl-video', '*'): 800,
   ('.srl-video', '.srl-columns'): 400,
-  ('.srl-video', '.srl-pdf-pagebreak'): 800,
-  ('.srl-video', '.srl-anchor'): 800,
   ('.srl-video', '.srl-background-container'): 1600,
 )

package/livingdocs/040.Media/030.video/scss/editor.scss

@@ -3,4 +3,14 @@
 .srl-video__thumbnail {
   max-width: 192px;
   max-height: 108px;
+}
+
+.srl-video__video-link-container {
+  display: none;
+}
+
+.srl-video.srl-video-show-pdf-link {
+  .srl-video__video-link-container {
+    display: grid;
+  }
 }

package/livingdocs/040.Media/030.video/scss/general.scss

@@ -1,5 +1,5 @@
 @use 'srl';
-@use "@/assets/scss/margins";
+@use "srl/fa";
 @use "spacing-variations";
 
 .srl-grid--media {
@@ -12,7 +12,7 @@
   display: block;
 }
 
-@include margins.srl-component-margin(spacing-variations.$margins);
+@include srl.spacer-component-margin(spacing-variations.$margins);
 
 .srl-video__thumbnail {
   @extend %srl-regular-width;
@@ -24,7 +24,6 @@
 
 .srl-video__video-link-container {
   @include srl.spacer-margin-top(100);
-  @extend %srl-regular-width;
 }
 
 .srl-video__video-link {
@@ -35,6 +34,11 @@
   @include srl.typography-video-link();
 }
 
+.srl-video__video-link-icon {
+  @extend %srl-icon-base;
+  @include fa.icon(play);
+}
+
 .srl-video__video-link-text {
   padding-left: srl.spacer-get(100);
 }

package/livingdocs/040.Media/030.video/scss/pdf.scss

@@ -4,6 +4,14 @@
 $page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
 $page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
 
+.srl-video {
+  display: none;
+}
+
+.srl-video.srl-video-show-pdf-link {
+  display: block;
+}
+
 .srl-grid--media {
   .srl-full-width & {
     max-width: 210mm;

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

@@ -1,46 +1,43 @@
-<div class="srl-video" data-remove-from-word="complete">
+<div
+  class="srl-video"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-grid srl-grid--media">
     <div class="srl-grid__inner srl-video__inner">
-      <srl-ld-video data-remove-from-xhtml="transient" data-remove-from-pdf="transient">
-        <div class="srl-video__video-container" doc-html="free-html" data-remove-from-pdf="complete"></div>
-        <img class="srl-video__thumbnail" doc-image="video-thumbnail"></img>
-        <div class="srl-video__play" data-remove-from-pdf="complete">
+      <srl-ld-video
+        data-remove-from-pdf="transient">
+        <div
+          class="srl-video__video-container"
+          doc-html="free-html"
+          data-remove-from-pdf="complete">
+        </div>
+        <img class="srl-video__thumbnail"
+          doc-image="video-thumbnail"
+        />
+        <div
+          class="srl-video__play"
+          data-remove-from-pdf="complete"
+        >
           <button class="srl-button srl-has-icon" type="button">
-              <svg class="svg svg-play" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M5 3L19 12L5 21V3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
+            <i class="srl-video__video-link-icon"></i>
             <span doc-editable="text">Video abspielen</span>
           </button>
         </div>
       </srl-ld-video>
     </div>
   </div>
-  <div class="srl-grid">
-    <div
-      class="srl-video__video-link-container"
-      data-remove-from-web="complete"
-      doc-toggle="showVideoLink"
-    >
+  <div
+    class="srl-grid srl-video__video-link-container"
+    data-remove-from-web="complete"
+  >
+    <div class="srl-grid__inner">
       <a class="srl-video__video-link" doc-link="href" target="_blank">
-        <span class="srl-video__video-link-icon">
-          <svg
-            class="svg svg-play"
-            viewBox="0 0 14 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M0.5 17C0.5 17.1844 0.601492 17.3538 0.764071 17.4408C0.92665 17.5278 1.12392 17.5183 1.27735 17.416L13.2774 9.41603C13.4164 9.32329 13.5 9.16718 13.5 9C13.5 8.83282 13.4164 8.67671 13.2774 8.58397L1.27735 0.583975C1.12392 0.481689 0.92665 0.472153 0.764071 0.559163C0.601492 0.646172 0.5 0.815602 0.5 1V17Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </span>
+        <i class="srl-video__video-link-icon"></i>
         <span class="srl-video__video-link-text" doc-editable="link">
           Link to the video in your report
         </span>
       </a>
     </div>
   </div>
-</div>
+</div>

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/010.button-container/button-container.html

@@ -1,4 +1,9 @@
-<div class="srl-grid srl-button-container">
+<div
+  class="srl-grid srl-button-container"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-grid__inner srl-button-container__inner" doc-container="button-container">
 
   </div>

package/livingdocs/060.Buttons/020.button/button.html

@@ -1,4 +1,10 @@
-<a doc-link="href" class="srl-button">
+<a
+  doc-link="href"
+  class="srl-button"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <i class="srl-button__icon" aria-hidden="true"></i>
   <span class="srl-button__text" doc-editable="button-text">Button</span>
 </a>

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/aside-content-container.html

@@ -1,4 +1,4 @@
-<div class="srl-grid srl-aside-content-container">
+<div class="srl-grid srl-aside-content-container srl-nested-container">
   <div
     class="srl-grid__aside srl-aside-content-container__aside"
     doc-container="aside"

package/livingdocs/070.Container/010.aside-content-container/ld-conf.json

@@ -1,6 +1,6 @@
 {
   "name": "aside-content-container",
-  "label": "Aside / Content container",
+  "label": "Aside content container",
   "properties": ["sticky", "pdf-spacer"],
   "directives": {
     "aside": {

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

@@ -1 +1,5 @@
 @use 'srl';
+
+.srl-aside-content-container__aside {
+  @extend %srl-decoration-line;
+}

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

@@ -1,3 +1,8 @@
+@use 'srl';
+@use "sass:map";
+
 .srl-aside-content-container {
   justify-content: space-between;
+  flex-direction: row;
+  align-items: flex-start;
 }

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

@@ -1 +1,13 @@
 @use "srl";
+
+.srl-aside-content-container {
+  gap: srl.spacer-get(200);
+}
+
+.srl-aside-content-container__aside {
+  order: 2;
+
+  @include srl.grid-media-up(tablet-ls) {
+    order: unset;
+  }
+}

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/app.scss

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