@simple-reporting/base 0.1.112 → 1.0.0

package/{scss → srl/scss}/grid/mixins.scss

@@ -7,7 +7,7 @@
 
 @mixin media($breakpoint) {
   @if not map.has-key(variables.$breakpoints, $breakpoint) {
-    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+    @error "Invalid breakpoint \"#{$breakpoint}\" specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
   @if $breakpoint == print {
     @media print {
@@ -43,7 +43,7 @@
 
 @mixin media-up($breakpoint) {
   @if not map.has-key(variables.$breakpoints, $breakpoint) {
-    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+    @error "Invalid breakpoint \"#{$breakpoint}\" specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
   $min: map.get(variables.$breakpoints, $breakpoint);
 
@@ -58,7 +58,7 @@
 
 @mixin media-down($breakpoint) {
   @if not map.has-key(variables.$breakpoints, $breakpoint) {
-    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+    @error "Invalid breakpoint \"#{$breakpoint}\" specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
   $next: system.map-get-next(variables.$breakpoints, $breakpoint);
   $max: false;
@@ -80,7 +80,7 @@
       map.has-key(variables.$breakpoints, $breakpoint-min) or not
       map.has-key(variables.$breakpoints, $breakpoint-max)
   ) {
-    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+    @error "Invalid breakpoint \"#{$breakpoint-min}\" or \"#{$breakpoint-max}\" specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
   $min: map.get(variables.$breakpoints, $breakpoint-min);
   @if $min == 0 {
@@ -202,10 +202,7 @@
     );
   }
 
-  $columns: map.get($gutter, columns);
-  @if not $columns {
-    $columns: 1;
-  }
+  $columns: map.get(variables.$columns, $breakpoint);
 
   $gap: map.get($gutter, gap);
   $row-gap: unset;
@@ -240,149 +237,10 @@
   );
 }
 
-@mixin core-styles {
-  @at-root {
-    .#{variables.$class-prefix}container {
-      @include container;
-
-      &-fluid {
-        @include container-fluid;
-      }
-
-      .#{variables.$class-prefix}container,
-      .#{variables.$class-prefix}container-fluid {
-        max-width: unset;
-        padding-inline: unset;
-      }
-    }
-
-    .#{variables.$class-prefix}row {
-      @include row;
-      .#{variables.$class-prefix}row {
-        display: block;
-      }
-    }
-
-    $maxCol: 0;
-    @each $breakpoint, $value in variables.$gutter {
-      $curCol: map.get($value, columns);
-      @if $curCol > $maxCol {
-        $maxCol: $curCol;
-      }
-    }
-    $listBreakpoints: map.keys(variables.$breakpoints);
-    $lenght: list.length($listBreakpoints);
-
-    .#{variables.$class-prefix}col {
-      &-span {
-        @for $col from 1 to ($maxCol + 1) {
-          &-#{$col} {
-            grid-column-end: span #{$col};
-          }
-        }
-      }
-
-      &-offset {
-        @for $offset from 1 to $maxCol {
-          &-#{$offset} {
-            grid-column-start: #{$offset + 1};
-          }
-        }
-      }
-    }
-
-    @each $breakpoint in $listBreakpoints {
-      $index: list.index($listBreakpoints, $breakpoint);
-      @include media($breakpoint) {
-        .#{variables.$class-prefix}col-#{$breakpoint} {
-          &-span {
-            @for $col
-              from 1
-              to
-              map.get(map.get(variables.$gutter, $breakpoint), columns)
-            {
-              &-#{$col} {
-                grid-column-end: span #{$col};
-              }
-            }
-          }
-
-          &-offset {
-            @for $offset
-              from 1
-              to
-              (map.get(map.get(variables.$gutter, $breakpoint), columns) - 1)
-            {
-              &-#{$offset} {
-                grid-column-start: #{$offset + 1};
-              }
-            }
-          }
-        }
-      }
-
-      @if $breakpoint != print {
-        @include media-up($breakpoint) {
-          .#{variables.$class-prefix}col-up-#{$breakpoint} {
-            &-span {
-              @for $col
-                from 1
-                to
-                map.get(map.get(variables.$gutter, $breakpoint), columns)
-              {
-                &-#{$col} {
-                  grid-column-end: span #{$col};
-                }
-              }
-            }
-
-            &-offset {
-              @for $offset
-                from 1
-                to
-                (map.get(map.get(variables.$gutter, $breakpoint), columns) - 1)
-              {
-                &-#{$offset} {
-                  grid-column-start: #{$offset + 1};
-                }
-              }
-            }
-          }
-        }
-
-        @if $index != $lenght {
-          @include media-down($breakpoint) {
-            .#{variables.$class-prefix}col-down-#{$breakpoint} {
-              &-span {
-                @for $col
-                  from 1
-                  to
-                  map.get(map.get(variables.$gutter, $breakpoint), columns)
-                {
-                  &-#{$col} {
-                    grid-column-end: span #{$col};
-                  }
-                }
-              }
+@mixin pdf-flex-col($span) {
+  width: functions.calculate-pdf-col-span-minus-one-gutter($span);
+}
 
-              &-offset {
-                @for $offset
-                  from 1
-                  to
-                  (
-                    map.get(map.get(variables.$gutter, $breakpoint), columns) -
-                      1
-                  )
-                {
-                  &-#{$offset} {
-                    grid-column-start: #{$offset + 1};
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+@mixin core-styles {
 }
+

package/{scss → srl/scss}/grid/variables.scss

@@ -5,6 +5,7 @@ $variable-prefix: system.$variable-prefix !default;
 
 $containers: () !default;
 $breakpoints: () !default;
+$columns: () !default;
 $gutter: () !default;
 
 $column-default-span: 4 !default;

package/{scss → srl/scss}/helpers/mixins.scss

@@ -13,39 +13,6 @@
   }
 }
 
-@mixin body-text {
-  h1 {
-    @include typography.get(headline1, true);
-  }
-  h2 {
-    @include typography.get(headline2, true);
-  }
-  h3 {
-    @include typography.get(headline3, true);
-  }
-  h4 {
-    @include typography.get(headline4, true);
-  }
-  h5 {
-    @include typography.get(headline5, true);
-  }
-  h6 {
-    @include typography.get(headline6, true);
-  }
-  p,
-  ul,
-  ol,
-  li,
-  td,
-  th,
-  dd,
-  dt {
-    @include typography.get(copy, true);
-  }
-
-  @include trim-margins;
-}
-
 @mixin list-reset() {
   list-style: none;
   margin: 0;

package/{scss → srl/scss}/typography/mixins.scss

@@ -39,7 +39,12 @@
   }
 }
 
-@mixin _register-typo-variables($typo, $map, $media: false) {
+@mixin _register-typo-variables(
+  $typo,
+  $map,
+  $media: false,
+  $mediaBehavior: false
+) {
   @if not $media {
     $defaults: map.merge(
       (
@@ -108,7 +113,31 @@
 
     @if map.has-key($map, media) {
       @each $breakpoint, $breakpointValue in map.get($map, media) {
-        @include _register-typo-variables($typo, $breakpointValue, $breakpoint);
+        @if $breakpoint == up {
+          @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
+            @include _register-typo-variables(
+              $typo,
+              $upBreakpointValue,
+              $upBreakpoint,
+              up
+            );
+          }
+        } @else if $breakpoint == down {
+          @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
+            @include _register-typo-variables(
+              $typo,
+              $downBreakpointValue,
+              $downBreakpoint,
+              down
+            );
+          }
+        } @else {
+          @include _register-typo-variables(
+            $typo,
+            $breakpointValue,
+            $breakpoint
+          );
+        }
       }
     }
   } @else {
@@ -116,7 +145,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-font-family,
         string.unquote(map.get($map, font-family)),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -124,7 +154,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-font-size,
         system.size-unit(map.get($map, font-size)),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -132,7 +163,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-line-height,
         system.size-unit(map.get($map, line-height), em),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -140,7 +172,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-font-style,
         string.unquote(map.get($map, font-style)),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -148,7 +181,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-font-weight,
         map.get($map, font-weight),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -156,7 +190,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
         system.size-unit(map.get($defaults, letter-spacing)),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -164,7 +199,8 @@
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-text-transform,
         map.get($defaults, text-transform),
-        $media
+        $media,
+        $mediaBehavior
       );
     }
 
@@ -173,13 +209,15 @@
         @include system.add-root-style(
           #{variables.$variable-prefix}typo-#{$typo}-margin-top,
           system.size-unit(map.get($map, margin-top), in),
-          $media
+          $media,
+          $mediaBehavior
         );
       } @else {
         @include system.add-root-style(
           #{variables.$variable-prefix}typo-#{$typo}-margin-top,
           system.size-unit(map.get($map, margin-top)),
-          $media
+          $media,
+          $mediaBehavior
         );
       }
     }
@@ -189,13 +227,15 @@
         @include system.add-root-style(
           #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
           system.size-unit(map.get($map, margin-bottom), in),
-          $media
+          $media,
+          $mediaBehavior
         );
       } @else {
         @include system.add-root-style(
           #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
           system.size-unit(map.get($map, margin-bottom)),
-          $media
+          $media,
+          $mediaBehavior
         );
       }
     }

package/srl/scss/xbrl-core-styles.scss

@@ -0,0 +1,47 @@
+@use 'srl';
+@use 'index';
+@use 'system/mixins';
+@use 'grid/variables';
+@use 'sass:map';
+@use 'sass:list';
+
+$breakpointsList: map.keys(variables.$breakpoints);
+$breakpointsListLength: list.length($breakpointsList);
+
+@at-root {
+  :root {
+    @each $key, $value in mixins.$styles {
+      $currentValue: $value;
+      $currentBreakpoint: 'print';
+      @each $breakpoint, $breakpointValue in variables.$breakpoints {
+        @if map.has-key(mixins.$stylesUp, $breakpoint, $key) {
+          $currentValue: map.get(mixins.$stylesUp, $breakpoint, $key);
+          $currentBreakpoint: $breakpoint;
+        }
+
+        @if map.has-key(mixins.$stylesOnly, $breakpoint, $key) {
+          $indexCurrent: list.index($breakpointsList, $currentBreakpoint);
+          $indexBreakpoint: list.index($breakpointsList, $breakpoint);
+          @if $indexBreakpoint >
+            $indexCurrent or
+            $indexBreakpoint ==
+            $breakpointsListLength
+          {
+            $currentValue: map.get(mixins.$stylesOnly, $breakpoint, $key);
+            $currentBreakpoint: $breakpoint;
+          }
+        }
+      }
+      --#{$key}: #{$currentValue};
+    }
+  }
+}
+
+@include index.core-styles;
+@include index.system-core-styles;
+@include index.fonts-core-styles;
+@include index.grid-core-styles;
+@include index.colors-core-styles;
+@include index.typography-core-styles;
+@include index.spacer-core-styles;
+@include index.helpers-core-styles;

package/{dev/nswow → srl/srl}/ArticleAutoloader.ts

@@ -1,15 +1,15 @@
-import ArticleLoader from './ArticleLoader'
-import { camelCase } from 'cheerio/utils'
+import { camelCase } from '#utils';
+import ArticleLoader from './ArticleLoader';
 
-type AutoloadList = string | string[]
+type AutoloadList = string | string[];
 
 /**
  * Class representing an ArticleAutoloader.
  * @class
  */
 class ArticleAutoloader {
-  classes: { [key: string]: { new (node: HTMLElement, options: any): any } }
-  selector: string
+  classes: { [key: string]: { new (node: HTMLElement, options: any): any } };
+  selector: string;
 
   /**
    * Constructor for the class.
@@ -18,8 +18,8 @@ class ArticleAutoloader {
    * @constructor
    */
   constructor() {
-    this.classes = {}
-    this.selector = '[data-autoload]'
+    this.classes = {};
+    this.selector = '[data-autoload]';
   }
 
   /**
@@ -29,10 +29,10 @@ class ArticleAutoloader {
    * @return {void}
    */
   init(obj: HTMLElement) {
-    const nodes: NodeListOf<Element> = obj.querySelectorAll(this.selector)
+    const nodes: NodeListOf<Element> = obj.querySelectorAll(this.selector);
     if (nodes) {
       for (let index = 0; index < nodes.length; index++) {
-        this._initAutoload(nodes[index] as HTMLElement)
+        this._initAutoload(nodes[index] as HTMLElement);
       }
     }
   }
@@ -44,7 +44,7 @@ class ArticleAutoloader {
    * @param {string} className - The name to associate with the object class.
    */
   register(objClass: ArticleLoader, className: string) {
-    this.classes[camelCase(className)] = objClass
+    this.classes[camelCase(className)] = objClass;
   }
 
   /**
@@ -58,7 +58,7 @@ class ArticleAutoloader {
    */
   _createInstance(node: HTMLElement, options: any, className: string) {
     if (this.classes[className] !== undefined) {
-      new this.classes[className](node, options)
+      new this.classes[className](node, options);
     }
   }
 
@@ -68,33 +68,33 @@ class ArticleAutoloader {
    * @param {HTMLElement} node - The node for which to initialize the autoload feature.
    */
   _initAutoload(node: HTMLElement): void {
-    let load: AutoloadList = node.dataset.autoload
+    let load: AutoloadList = node.dataset.autoload;
 
     // Converting to array in case of single string for uniform processing
     try {
-      load = JSON.parse(load)
+      load = JSON.parse(load);
     } catch (e) {
-      load = load.split(' ')
+      load = load.split(' ');
     }
 
     if (typeof load === 'string') {
-      load = [load]
+      load = [load];
     }
     // check if it's a single string or a list
     if (load.length === 1) {
-      const options = node.dataset.options || {}
-      this._createInstance(node, options, camelCase(load[0]))
+      const options = node.dataset.options || {};
+      this._createInstance(node, options, camelCase(load[0]));
     } else {
-      const optionsDataSet = JSON.parse(node.dataset.options || '{}')
+      const optionsDataSet = JSON.parse(node.dataset.options || '{}');
       for (const className of load) {
         if (className !== '') {
-          const options = optionsDataSet[className] || {}
-          this._createInstance(node, options, camelCase(className))
+          const options = optionsDataSet[className] || {};
+          this._createInstance(node, options, camelCase(className));
         }
       }
     }
   }
 }
 
-export default ArticleAutoloader
-export { ArticleAutoloader }
+export default ArticleAutoloader;
+export { ArticleAutoloader };

package/{dev/nswow → srl/srl}/ArticleLoader.ts

@@ -3,8 +3,8 @@
  * @class
  */
 abstract class ArticleLoader {
-  protected element: HTMLElement
-  protected options: { key: string; value: any }
+  protected element: HTMLElement;
+  protected options: { key: string; value: any };
 
   /**
    * Constructs a new instance of the class.
@@ -13,13 +13,16 @@ abstract class ArticleLoader {
    * @param {any} options - Optional options to pass to the class.
    * @constructor
    */
-  protected constructor(selector: string | Node, options: { key: string; value: any } | undefined) {
+  protected constructor(
+    selector: string | Node,
+    options: { key: string; value: any } | undefined,
+  ) {
     if (typeof selector === 'string' || selector instanceof NodeList) {
-      this._initializeNodeList(selector, options)
+      this._initializeNodeList(selector, options);
     } else if (selector instanceof Node) {
-      this.element = selector as HTMLElement
-      this.element[this.constructor.name] = this
-      this._initializeNode(selector, options)
+      this.element = selector as HTMLElement;
+      this.element[this.constructor.name] = this;
+      this._initializeNode(selector, options);
     }
   }
 
@@ -32,8 +35,11 @@ abstract class ArticleLoader {
    * @return {void} - No return value.
    */
   private _initializeNodeList(selector: string | NodeList, options: unknown) {
-    const nodeList = typeof selector === 'string' ? document.querySelectorAll(selector) : selector
-    Array.from(nodeList).forEach((node) => new this.constructor(node, options))
+    const nodeList =
+      typeof selector === 'string'
+        ? document.querySelectorAll(selector)
+        : selector;
+    Array.from(nodeList).forEach((node) => new this.constructor(node, options));
   }
 
   /**
@@ -44,8 +50,8 @@ abstract class ArticleLoader {
    * @return {void}
    */
   private _initializeNode(node: Node, options: unknown) {
-    this._assignOptions(options)
-    this._create()
+    this._assignOptions(options);
+    this._create();
   }
 
   /**
@@ -56,9 +62,10 @@ abstract class ArticleLoader {
    */
   private _assignOptions(options: unknown) {
     if (options !== undefined) {
-      this.options = typeof options === 'string' ? JSON.parse(options) : options
+      this.options =
+        typeof options === 'string' ? JSON.parse(options) : options;
     } else {
-      this.options = {}
+      this.options = {};
     }
   }
 
@@ -67,7 +74,7 @@ abstract class ArticleLoader {
    * @return { key: string, value: any }
    */
   public getOptions() {
-    return this.options
+    return this.options;
   }
 
   /**
@@ -75,7 +82,7 @@ abstract class ArticleLoader {
    * @return {HTMLElement}
    */
   public getElement() {
-    return this.element
+    return this.element;
   }
 
   /**
@@ -84,8 +91,8 @@ abstract class ArticleLoader {
    * This must be defined in any class extending ArticleLoader. It serves as the
    * entry point for the initialization of the abstraction.
    */
-  abstract _create(): void
+  abstract _create(): void;
 }
 
-export default ArticleLoader
-export { ArticleLoader }
+export default ArticleLoader;
+export { ArticleLoader };