@simple-reporting/base 0.0.1

package/livingdocs/Media/nswow-table/general.scss

@@ -0,0 +1,281 @@
+@use 'nswow';
+@use 'sass:map';
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: 0;
+  table-layout: fixed;
+}
+
+td,
+th {
+  border-bottom: 1px solid #{nswow.colors-dark()};
+  padding: nswow.system-size-unit(nswow.padding(small));
+  vertical-align: bottom;
+  @include nswow.typography-copy2();
+
+  @include nswow.grid-media(print) {
+    padding: nswow.system-size-unit(nswow.padding(small), in);
+  }
+
+  /**
+  Paddings
+   */
+  &[class*='noline'] {
+    padding: 0;
+  }
+
+  &[class*='noline_space'] {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  /*
+  Font colors
+  */
+
+  /*
+  Font Sizes
+  */
+  &[class*='head'] {
+    @include nswow.typography-copy2();
+  }
+
+  &[class*='head_small'] {
+    @include nswow.typography-copy3();
+  }
+
+  .pdf-font-size-small & {
+    @include nswow.grid-media(print) {
+      @include nswow.typography-copy3();
+    }
+  }
+
+  /*
+  PDF Cell Paddings
+  */
+  .pdf-padding-small & {
+    @include nswow.grid-media(print) {
+      padding: nswow.system-size-unit(nswow.padding(base));
+      @include nswow.grid-media(print) {
+        padding: nswow.system-size-unit(nswow.padding(base), in);
+      }
+    }
+  }
+
+  .pdf-padding-tiny & {
+    @include nswow.grid-media(print) {
+      padding: nswow.system-size-unit(nswow.padding(tiny));
+      @include nswow.grid-media(print) {
+        padding: nswow.system-size-unit(nswow.padding(tiny), in);
+      }
+    }
+  }
+
+  /*
+  Font Weights
+  */
+  &[class*='head'],
+  &[class*='bold'] {
+    font-weight: 700;
+  }
+
+  /*
+  First and last child paddings
+  has to be after the pdf paddings, to override
+  */
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+
+    &[class*='background'] {
+      padding-right: nswow.system-size-unit(nswow.padding(small));
+      @include nswow.grid-media(print) {
+        padding-right: nswow.system-size-unit(nswow.padding(small), in);
+      }
+    }
+  }
+
+  /*
+  Borders
+  */
+  &[class='line'] {
+    border-bottom: 1px solid #{nswow.colors-dark()};
+  }
+
+  &[class*='head'],
+  &[class*='bline'] {
+    border-bottom: 2px solid #{nswow.colors-dark()};
+  }
+
+  &[class*='noline'] {
+    border-bottom: 0;
+  }
+
+  /*
+  Indents
+  */
+  &[class*='_ind'] {
+    &:first-child {
+      padding-left: nswow.system-size-unit(nswow.padding(small));
+      @include nswow.grid-media(print) {
+        padding-left: nswow.system-size-unit(nswow.padding(small), in);
+      }
+    }
+  }
+
+  &[class*='_ind_ind'] {
+    &:first-child {
+      padding-left: nswow.system-size-unit(
+        map.get(nswow.$padding, 'small') * 2
+      );
+      @include nswow.grid-media(print) {
+        padding-left: nswow.system-size-unit(
+          map.get(nswow.$padding, 'small') * 2,
+          in
+        );
+      }
+    }
+  }
+
+  /*
+  Cell Backgrounds
+  DEFINE HERE; DIFFERENT CSS CLASSES IN EVERY PROJECT
+  */
+  &[class*='background-01'] {
+    background-color: nswow.colors-shade-100();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-02'] {
+    background-color: nswow.colors-shade-200();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-03'] {
+    background-color: nswow.colors-shade-300();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-04'] {
+    background-color: nswow.colors-shade-400();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-05'] {
+    background-color: nswow.colors-shade-500();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-06'] {
+    background-color: nswow.colors-shade-600();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-07'] {
+    background-color: nswow.colors-shade-700();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-08'] {
+    background-color: nswow.colors-shade-800();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-09'] {
+    background-color: nswow.colors-shade-900();
+    color: nswow.colors-dark();
+  }
+
+  &[class*='background-10'] {
+    background-color: nswow.colors-primary();
+    color: nswow.colors-on-primary();
+  }
+
+  /*
+  Alignments
+  */
+  &[class*='horizontal-left'] {
+    text-align: left;
+  }
+
+  &[class*='horizontal-center'] {
+    text-align: center;
+  }
+
+  &[class*='horizontal-right'] {
+    text-align: right;
+  }
+
+  &[class*='vatop'] {
+    vertical-align: top;
+  }
+
+  &[class*='vamiddle'] {
+    vertical-align: middle;
+  }
+
+  &[class*='vabottom'] {
+    vertical-align: bottom;
+  }
+
+  /*
+  Responsive CSS tables
+  */
+  &:first-child {
+    .responsive-table & {
+      background: white;
+      position: sticky;
+      left: 0;
+      z-index: 2;
+    }
+
+    &:not(:first-child) {
+      .responsive-table & {
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    .has-shadow & {
+      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &:nth-child(2) {
+    .has-shadow & {
+      padding-left: calc(#{nswow.spacer(small)} + 24px);
+    }
+  }
+
+  /*
+  Paragraphs and spans
+  */
+
+  p span {
+    white-space: pre-line;
+
+    &[class*='bold'] {
+      font-weight: 700;
+    }
+
+    &[class*='srl-number'] {
+      white-space: nowrap;
+    }
+
+    &:empty {
+      &:before {
+        content: ' ';
+      }
+    }
+  }
+
+  &[class*='noline'] p span {
+    white-space: normal;
+  }
+}

package/livingdocs/Media/nswow-table/ldd.scss

@@ -0,0 +1,2 @@
+@use 'nswow';
+@use 'web';

package/livingdocs/Media/nswow-table/nswow-table.html

@@ -0,0 +1,30 @@
+<script type="ld-conf">
+  {
+  	"name": "nswow-table",
+  	"label": "ns.wow table",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-nswow-table.min.svg",
+  	"properties": [
+  		"web-width",
+  		"pdf-width",
+  		"pdf-padding",
+  		"pdf-font-size"
+  	],
+  	"directives": {
+  		"nswow-table": {
+  			"services": [{
+  				"service": "nswow-table",
+  				"label": "ns.wow Table"
+  			}]
+  		}
+  	}
+  }
+</script>
+<div class="srl-article__grid srl-article__grid--indent">
+  <div class="srl-article__grid--inner">
+    <div doc-include="nswow-table" data-autoload="nswow-table">
+      <div class="lc-table">
+        <div class="table-placeholder">Placeholder for ns.wow Table</div>
+      </div>
+    </div>
+  </div>
+</div>

package/livingdocs/Media/nswow-table/pdf.scss

@@ -0,0 +1,8 @@
+@use 'nswow';
+@use 'print';
+
+tr {
+  &[class*='pagebreak'] {
+    break-after: always;
+  }
+}

package/livingdocs/Media/nswow-table/properties.json

@@ -0,0 +1,66 @@
+{
+  "web-width": {
+    "label": "Web width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-web"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-web"
+      }
+    ]
+  },
+  "pdf-width": {
+    "label": "PDF width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-pdf"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-pdf"
+      }
+    ]
+  },
+  "pdf-padding": {
+    "label": "PDF padding",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Normal"
+      },
+      {
+        "caption": "Small",
+        "value": "pdf-padding-small"
+      },
+      {
+        "caption": "Tiny",
+        "value": "pdf-padding-tiny"
+      }
+    ]
+  },
+  "pdf-font-size": {
+    "label": "PDF font-size",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Normal"
+      },
+      {
+        "caption": "Small",
+        "value": "pdf-font-size-small"
+      }
+    ]
+  }
+}

package/livingdocs/Media/nswow-table/web.scss

@@ -0,0 +1,23 @@
+.ns-table-container {
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  position: relative;
+}
+
+table {
+  position: relative;
+  border-collapse: separate;
+  table-layout: auto;
+
+  @-moz-document url-prefix() {
+    border-collapse: inherit;
+  }
+}
+
+tr {
+  &:not([class*='head']) {
+    &:hover td {
+      background-color: transparent; // TODO: please define a default hover background color
+    }
+  }
+}

package/livingdocs/Media/nswow-table/word.scss

@@ -0,0 +1,2 @@
+@use 'nswow';
+@use 'print';

package/livingdocs/Media/video/app.scss

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

package/livingdocs/Media/video/general.scss

@@ -0,0 +1,7 @@
+@use 'nswow';
+
+.srl-video {
+  &__inner {
+    aspect-ratio: 16 / 9;
+  }
+}

package/livingdocs/Media/video/ldd.scss

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

package/livingdocs/Media/video/pdf.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Media/video/print.scss

@@ -0,0 +1,5 @@
+.srl-video {
+  &.hide-in-pdf {
+    display: none;
+  }
+}

package/livingdocs/Media/video/properties.json

@@ -0,0 +1,41 @@
+{
+  "web-width": {
+    "label": "Web width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-web"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-web"
+      }
+    ]
+  },
+  "pdf-width": {
+    "label": "PDF width",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Text width"
+      },
+      {
+        "caption": "Content width",
+        "value": "srl-article__grid--content-pdf"
+      },
+      {
+        "caption": "Full width",
+        "value": "srl-article__grid--full-pdf"
+      }
+    ]
+  },
+  "hide-in-pdf": {
+    "label": "Hide in PDF",
+    "type": "option",
+    "value": "hide-in-pdf"
+  }
+}

package/livingdocs/Media/video/video.html

@@ -0,0 +1,26 @@
+<script type="ld-conf">
+   {
+   	"name": "video",
+   	"label": "Video",
+  "iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-video.min.svg",
+   	"properties": [
+  	"web-width",
+  	"pdf-width",
+  	"hide-in-pdf"
+  ],
+   	"directives": {
+   		"background": {
+   			"imageRatios": ["16:9"],
+   			"allowOriginalRatio": false
+   		}
+   	}
+   }
+</script>
+<div class="srl-video srl-article__grid srl-article__grid--indent">
+  <div class="srl-video__inner srl-article__grid--inner">
+    <div class="srl-video__video-thumbnail" doc-image="background"></div>
+    <div doc-html="free-html" class="srl-video__video-container">
+      <div class="iframe-placeholder"></div>
+    </div>
+  </div>
+</div>

package/livingdocs/Media/video/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Misc/accordion/accordion.html

@@ -0,0 +1,56 @@
+<script type="ld-conf">
+  {
+  	"name": "accordion",
+  	"label": "Accordion",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-accordion.min.svg",
+  	"directives": {
+            "content": {
+  			"defaultComponents": {
+  				"paragraph": "paragraph"
+  			}
+  		}
+  	}
+  }
+</script>
+<div class="srl-accordion" data-autoload="accordion">
+  <div class="srl-accordion__toggle">
+    <div class="srl-accordion__head">
+      <div class="srl-accordion__title">
+        <span
+          class="srl-accordion__title-number"
+          doc-optional
+          doc-editable="number"
+        >
+          1.
+        </span>
+        <span class="srl-accordion__title-text" doc-editable="text">
+          Title
+        </span>
+        <span class="srl-accordion__title-icon">
+          <svg
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9 1v16M17 9H1"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="srl-accordion__content">
+    <div class="srl-accordion__content-wrapper">
+      <div
+        class="srl-accordion__content-inner srl-article-root"
+        doc-container="content"
+      ></div>
+    </div>
+  </div>
+</div>

package/livingdocs/Misc/accordion/app.scss

@@ -0,0 +1,63 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+$iconSize: 20;
+
+.srl-accordion {
+  &__toggle {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__head {
+    background-color: nswow.colors-on-secondary-light();
+    padding: nswow.system-size-unit(20) nswow.system-size-unit(10);
+  }
+
+  &__title {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+
+    &-number {
+      flex: 0 0 nswow.system-size-unit($numberSize);
+    }
+
+    &-icon {
+      margin-left: auto;
+      width: nswow.system-size-unit($iconSize);
+      height: nswow.system-size-unit($iconSize);
+    }
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 300ms linear;
+    overflow: hidden;
+
+    &-wrapper {
+      overflow: hidden;
+    }
+  }
+
+  &.open {
+    .srl-accordion__content {
+      grid-template-rows: 1fr;
+    }
+  }
+}

package/livingdocs/Misc/accordion/app.ts

@@ -0,0 +1,10 @@
+import ArticleLoader from 'nswow/ArticleLoader';
+
+export default class extends ArticleLoader {
+  _create() {
+    this.toggle = this.element.querySelector('.srl-accordion__toggle');
+    this.toggle.addEventListener('click', (e) => {
+      this.element.classList.toggle('open');
+    });
+  }
+}

package/livingdocs/Misc/accordion/general.scss

@@ -0,0 +1,44 @@
+@use 'nswow';
+
+$numberSize: 50;
+$iconSize: 20;
+
+.srl-accordion {
+  margin-bottom: nswow.system-size-unit(30);
+  @include nswow.grid-media(print) {
+    margin-bottom: nswow.system-size-unit(30, in);
+  }
+
+  &__toggle {
+    @include nswow.grid-container();
+    @include nswow.grid-row();
+  }
+
+  &__head {
+    color: nswow.colors-primary();
+    @include nswow.typography-headline3;
+
+    @include nswow.grid-col(12, phone);
+    @include nswow.grid-col(12, portrait);
+    @include nswow.grid-col(12, landscape);
+    @include nswow.grid-col(9, desktop);
+    @include nswow.grid-offset(2, desktop);
+    @include nswow.grid-col(9, print);
+    @include nswow.grid-offset(2, print);
+  }
+
+  &__content {
+    display: block;
+    &-inner {
+      display: block;
+      padding-top: nswow.system-size-unit(30);
+      padding-bottom: nswow.system-size-unit(30);
+      @include nswow.helpers-trim-margins;
+
+      @include nswow.grid-media(print) {
+        padding-top: nswow.system-size-unit(30, in);
+        padding-bottom: nswow.system-size-unit(30, in);
+      }
+    }
+  }
+}