@simple-reporting/base 1.0.36 → 1.0.38

package/livingdocs/110.PDF/075.pdf-landscape-container/ld-conf.json

@@ -0,0 +1,7 @@
+{
+  "name": "pdf-landscape-container",
+  "label": "PDF landscape container",
+  "properties": [
+    "page-size"
+  ]
+}

package/livingdocs/110.PDF/075.pdf-landscape-container/pdf-landscape-container.html

@@ -0,0 +1,9 @@
+<div
+  class="srl-pdf-landscape-container srl-nested-container"
+  data-remove-from-web="transient"
+  data-remove-from-word="transient"
+  data-remove-from-xhtml="transient"
+  doc-container="container"
+>
+
+</div>

package/livingdocs/110.PDF/075.pdf-landscape-container/properties.json

@@ -0,0 +1,15 @@
+{
+  "page-size": {
+    "label": "Page size",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Default (A4)"
+      },
+      {
+        "caption": "A3",
+        "value": "srl-pdf-landscape-container--a3"
+      }
+    ]
+  }
+}

package/livingdocs/110.PDF/075.pdf-landscape-container/scss/pdf.scss

@@ -0,0 +1,19 @@
+@use "srl";
+
+@page a4-landscape {
+  -ro-media-size: A4 landscape;
+  size: A4 landscape;
+}
+
+@page a3-landscape {
+  -ro-media-size: A3 landscape;
+  size: A3 landscape;
+}
+
+.srl-pdf-landscape-container {
+  page: a4-landscape;
+}
+
+.srl-pdf-landscape-container--a3 {
+  page: a3-landscape;
+}

package/livingdocs/110.PDF/100.pdf-toc-item/pdf-toc-item.html

@@ -1,6 +1,7 @@
 <a
   class="srl-pdf-toc__item"
-  doc-link="href" data-page-number=""
+  doc-link="href"
+  data-page-number=""
   data-is-toc-item="true"
   data-remove-from-web="complete"
   data-remove-from-word="complete"
@@ -9,5 +10,5 @@
   <div class="srl-pdf-toc__text" doc-editable="pdf-toc-item-text" data-is-toc-text="true">
     Article title
   </div>
-  <div class="srl-pdf-toc__number" doc-editable="pdf-toc-item-number" data-is-toc-number="true">1</div>
+  <div class="srl-pdf-toc__page-number" doc-editable="pdf-toc-item-number" data-is-toc-number="true">1</div>
 </a>

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

@@ -1,4 +1,5 @@
 @use 'srl';
+@use "sass:map";
 
 .srl-pdf-toc__item {
   padding-block: srl.spacer-get(100);
@@ -11,11 +12,6 @@
 
 .srl-pdf-toc__text {
   width: calc(100% - srl.system-size-unit(24pt) - srl.spacer-get(100));
-}
-
-.srl-pdf-toc__number {
-  text-align: right;
-  width: srl.system-size-unit(24pt);
 
   &:after {
     .srl-pdf-toc__link:not([href]) & {
@@ -25,4 +21,9 @@
       margin-left: srl.spacer-get(100)
     }
   }
+}
+
+.srl-pdf-toc__page-number {
+  text-align: right;
+  width: srl.system-size-unit(24pt);
 }

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

@@ -1,11 +1,19 @@
 @use 'srl';
 @use 'sass:map';
 
+$toc-toc-page-number-width: srl.system-size-unit(map.get(srl.$meta, pdf, toc-page-number, width-pdf));
+
 .srl-pdf-toc__item {
   -ro-pdf-tag-type: toci;
 }
 
-.srl-pdf-toc__number {
+.srl-pdf-toc__text {
+  width: calc(100% - $toc-toc-page-number-width);
+}
+
+.srl-pdf-toc__page-number {
+  width: $toc-toc-page-number-width;
+
   &:after {
     content: target-counter(attr(data-page-number), page);
   }

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

@@ -0,0 +1,7 @@
+<srl-ld-download-center>
+  <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
+    </span>
+  </div>
+</srl-ld-download-center>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useDownloads, useLocale } from '#composables'
+import { computed } from 'vue'
+import SvgDownload from 'assets/images/download.svg?component'
+
+const downloads = useDownloads()
+const locale = useLocale()
+
+interface DownloadItem extends NsWowDownload {
+  href?: string
+}
+
+type DownloadGroup = {
+  title: string | null
+  items: DownloadItem[]
+}
+
+const list = computed<DownloadGroup[]>(() => {
+  const res: DownloadGroup[] = []
+  let group: DownloadGroup = { title: null, items: [] }
+  downloads.value.forEach((i) => {
+    if (i.type === 'sectionTitle') {
+      group = { title: i.title, items: [] }
+      res.push(group)
+    } else if (i.type === 'artifact') {
+      const row = Object.assign(i)
+      row.href = `./downloads/${locale.value}/${i.artifact}`
+      !group || group.items.push(row)
+    }
+  })
+  return res
+})
+</script>
+
+<template>
+  <div class="srl-download-center">
+    <div v-for="(item, index) in list" :key="index" class="srl-download-center__inner">
+      <h2 v-if="item.title" class="srl-grid srl-title-h2 srl-linkable">
+        <span class="srl-grid__inner srl-title-h2__text">{{ item.title }}</span>
+      </h2>
+
+      <section class="srl-grid srl-download-center__section">
+        <div class="srl-grid__inner">
+          <div
+            v-for="(file, fileIndex) in item.items"
+            :key="fileIndex"
+            class="srl-download-center__item"
+          >
+            <a class="srl-download-center__link" :href="file.href" download>
+              <div class="srl-download-center__title-meta-container">
+                <div class="srl-download-center__title">
+                  <strong v-text="file.title" />
+                </div>
+                <div class="srl-download-center__meta">{{ file.fileType }} | {{ file.size }}</div>
+              </div>
+              <div class="srl-download-center__language-button-container">
+                <span class="srl-download-center__language">{{ locale.toUpperCase() }}</span>
+                <span class="srl-round-button">
+                  <SvgDownload/>
+                </span>
+              </div>
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>

package/livingdocs/130.Hosting_Components/010.download-center/ld-conf.json

@@ -0,0 +1,4 @@
+{
+  "name": "download-center",
+  "label": "Download center"
+}

package/livingdocs/130.Hosting_Components/010.download-center/properties.json

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

package/livingdocs/130.Hosting_Components/010.download-center/scss/_spacing-variations.scss

@@ -0,0 +1,3 @@
+$margins: (
+  ('.srl-download-center__section', '*'): 400
+)

package/livingdocs/130.Hosting_Components/010.download-center/scss/editor.scss

@@ -0,0 +1,15 @@
+@use 'srl';
+@use "web";
+
+srl-ld-download-center {
+  display: block;
+}
+
+.srl-download-center {
+  text-align: center;
+  @include srl.spacer-padding-block(200);
+}
+
+.srl-download-center__editor-text {
+  @include srl.typography-editor-label-text();
+}

package/livingdocs/130.Hosting_Components/010.download-center/scss/general.scss

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

package/livingdocs/130.Hosting_Components/010.download-center/scss/pdf.scss

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

package/livingdocs/130.Hosting_Components/010.download-center/scss/web.scss

@@ -0,0 +1,42 @@
+@use "srl";
+@use "spacing-variations";
+
+.srl-download-center {
+  display: flex;
+  flex-direction: column;
+  @include srl.spacer-row-gap(800);
+}
+
+.srl-download-center__section {
+  > .srl-grid__inner {
+  }
+}
+
+.srl-download-center__item {
+  border-bottom: 1px solid srl.colors-primary-1000();
+  &:first-child {
+    border-top: 1px solid srl.colors-primary-1000();
+  }
+}
+
+.srl-download-center__link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--srl-spacer-200) 0;
+  color: srl.colors-grey-600();
+  text-decoration: none;
+  gap: var(--srl-spacer-100);
+  @include srl.typography-paragraph();
+}
+
+.srl-download-center__title {
+  @include srl.typography-title-h5();
+}
+
+.srl-download-center__language-button-container {
+  display: flex;
+  align-items: center;
+  gap: var(--srl-spacer-100)
+}

package/livingdocs/130.Hosting_Components/020.search/ld-conf.json

@@ -0,0 +1,4 @@
+{
+  "name": "search",
+  "label": "Search"
+}

package/livingdocs/130.Hosting_Components/020.search/properties.json

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

package/livingdocs/130.Hosting_Components/020.search/scss/_spacing-variations.scss

@@ -0,0 +1,4 @@
+$margins: (
+  ('.srl-search-form', '*'): 400,
+  ('.srl-search-results', '*'): 300
+)

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

@@ -0,0 +1,14 @@
+@use 'srl';
+@use "web";
+
+srl-ld-search {
+  display: block;
+}
+
+.srl-search {
+  text-align: center;
+}
+
+.srl-search__editor-text {
+  @include srl.typography-editor-label-text();
+}

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

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

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

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

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

@@ -0,0 +1,200 @@
+@use "srl";
+@use "spacing-variations";
+
+
+/*
+Search form
+*/
+
+.srl-search__wrap {
+  @include srl.spacer-margin-top(400);
+}
+
+.srl-search-form__group {
+  transition: all .3s ease-out;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: srl.colors-grey-600();
+  border-radius: srl.system-root-style(srl-default-border-radius);
+  overflow: hidden;
+
+  &:hover {
+    @extend %srl-button__switch-hover;
+    background-color: srl.colors-secondary-1000();
+    .srl-search-form__button {
+      background-color: srl.colors-secondary-1000();
+      border-color: srl.colors-grey-800();
+
+      svg {
+        color: srl.colors-grey-800();
+      }
+    }
+  }
+
+  &:has(input:focus) {
+    @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 {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+.srl-search-form__input {
+  width: 100%;
+  height: 100%;
+  border: 0 !important;
+  outline: 0 !important;
+  @include srl.typography-title-h5();
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, outline 0.3s ease;
+  background-color: transparent;
+  color: srl.colors-grey-800();
+  padding:
+    srl.spacer-get(400)
+    srl.system-size-unit(96)
+    srl.spacer-get(400)
+    srl.spacer-get(400)
+  ;
+
+  &::placeholder {
+    @include srl.typography-title-h5();
+    color: srl.colors-grey-800();
+  }
+
+  &:hover {
+  }
+
+  &:focus {
+    border-color: transparent;
+  }
+}
+
+.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();
+  }
+}
+
+/*
+Search results
+*/
+.srl-search-results__main-title {
+  @include srl.spacer-margin-top(200);
+}
+
+.srl-search-results__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.srl-search-results__item {
+  &:first-child {
+    .srl-search-results__link {
+      border-top-width: srl.system-size-unit(1);
+    }
+  }
+  &:has(+ .srl-search-results__item:hover) {
+    .srl-search-results__link {
+      border-bottom-color: srl.colors-grey-600();
+    }
+  }
+  &:has(+ .srl-search-results__item:focus) {
+    .srl-search-results__link {
+      border-bottom-color: srl.colors-black-1000();
+    }
+  }
+}
+
+.srl-search-results__link {
+  display: block;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  text-decoration: none;
+  @include srl.spacer-padding-block(400);
+  @include srl.spacer-padding-inline(200);
+  color: srl.colors-grey-600();
+  border-color: srl.colors-primary-1000();
+  border-style: solid;
+  border-width: 0 0 srl.system-size-unit(1) 0;
+
+  &:hover {
+    background-color: srl.colors-grey-600();
+    color: srl.colors-white-1000();
+    border-color: srl.colors-grey-600();
+  }
+
+  &:focus {
+    background-color: srl.colors-black-1000();
+    color: srl.colors-primary-1000();
+    border-color: srl.colors-primary-1000();
+  }
+}
+
+.srl-search-results__title {
+  @include srl.typography-title-h5();
+  color: inherit;
+  transition: color 0.3s ease;
+
+  .srl-search-results__link:focus & {
+  }
+}
+
+.srl-search-results__snippet {
+  @include srl.typography-paragraph();
+  color: inherit;
+  transition: color 0.3s ease;
+
+  .srl-search-results__link:focus & {
+  }
+}

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

@@ -0,0 +1,7 @@
+<srl-ld-search use-auto-search use-more-results>
+  <div class="srl-search" data-remove-from-web="complete">
+    <span class="srl-search__editor-text">
+      Placeholder for search form
+    </span>
+  </div>
+</srl-ld-search>