@simple-reporting/base 0.0.1

package/dev/src/components/SrlPage/KFCApplication/scss/_highcharts-custom.scss

@@ -0,0 +1,71 @@
+#kfc-chart svg.highcharts-root {
+  width: 100%;
+}
+
+.highcharts-axis-labels text {
+  color: var(--global-color-gray-400);
+  font-weight: var(--global-font-weight-regular);
+  font-size: 14px;
+}
+
+.highcharts-background,
+.highcharts-plot-background {
+  fill: #fff;
+}
+
+.highcharts-legend-item > span,
+.highcharts-legend-item > text {
+  font-size: inherit;
+  color: var(--global-color-black-100);
+  font-weight: var(--global-font-weight-regular);
+  font-size: var(--srl-typo-copy3-font-size, unset);
+  line-height: var(--srl-typo-copy3-line-height, unset);
+}
+
+.highcharts-background {
+  fill: white;
+}
+
+.highcharts-xaxis {
+  .highcharts-tick {
+    &:last-of-type,
+    &:nth-last-of-type(2) {
+      display: block;
+    }
+  }
+
+  .highcharts-legend-item.highcharts-column-series .highcharts-point {
+  }
+}
+
+// .highcharts-tooltip-box {
+//   stroke-width: $tooltip-border;
+//   fill: $tooltip-background;
+//   stroke: var(--global-color-black-100);
+//   z-index: 999;
+// }
+
+.highcharts-axis-line {
+  stroke: #969ba0;
+}
+
+.highcharts-grid .highcharts-xaxis-grid {
+  stroke: #969ba0;
+  stroke-width: 1px;
+}
+
+.highcharts-grid .highcharts-grid-line:first-of-type {
+  display: block;
+}
+
+.highcharts-axis-labels.highcharts-xaxis-labels text,
+.highcharts-axis-labels.highcharts-yaxis-labels text {
+  fill: #969ba0;
+}
+
+.highcharts-yaxis-grid {
+  .highcharts-grid-line {
+    stroke: #969ba0;
+    stroke-width: 1px;
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_highcharts-general.scss

@@ -0,0 +1,113 @@
+@use 'sass:list';
+$colors-highchart: #007b91 #70c3d4 #009d5a #afcd5f #99cad3 #c5e7ed #99d7bd #dfebbf #f18fb9 #f9d2e3
+  #bd0075;
+
+$background-color: transparent;
+$font-family: var(--global-body-font-family);
+
+$xaxis-grid-line: 1px;
+$data-label-color: var(--global-color-black-100);
+$tooltip-border: 0px;
+
+.highcharts-background {
+  fill: transparent;
+}
+
+.highcharts-title {
+  display: none;
+}
+
+.highcharts-container {
+  height: auto;
+}
+
+.highcharts-point {
+  stroke: none;
+}
+
+.highcharts-halo {
+  display: none;
+}
+
+.highcharts-axis-line {
+  stroke: none;
+}
+
+.highcharts-grid-line {
+  stroke: none;
+}
+
+.highcharts-tick {
+  stroke: var(--global-color-black-100);
+}
+
+.highcharts-yaxis .highcharts-tick {
+  stroke: none;
+
+  .no-thick-axis & {
+    stroke-width: 1px;
+  }
+}
+
+.highcharts-point-inactive,
+.highcharts-series-inactive {
+  opacity: 0.8;
+}
+
+.ns-line-chart {
+  .highcharts-point:not(.highcharts-point-hover) {
+    display: none;
+  }
+}
+
+.highcharts-yaxis .highcharts-axis-line {
+  stroke: none;
+
+  .no-thick-axis & {
+    stroke-width: 0;
+  }
+}
+
+.highcharts-yaxis {
+  transform: translateX(-5px);
+
+  .no-thick-axis & {
+    transform: translateX(0);
+  }
+}
+
+.highcharts-xaxis {
+  .highcharts-tick {
+    &:last-of-type,
+    &:nth-last-of-type(2) {
+      display: none;
+
+      .no-thick-axis & {
+        display: block;
+      }
+    }
+  }
+}
+
+.tooltip-series-color {
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 4px;
+
+  background-color: black;
+  margin-right: 5px;
+
+  @for $i from 1 through list.length($colors-highchart) {
+    $current-color: list.nth($colors-highchart, $i);
+
+    &.color-#{$i - 1} {
+      background-color: $current-color;
+    }
+  }
+}
+
+.tooltip-series-value {
+  color: var(--srl-color-dark);
+  font-weight: 600;
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_iz-keyfigure-comparison-dropdown.scss

@@ -0,0 +1,189 @@
+.iz-kfc-dropdown {
+  position: relative;
+  background: white;
+  z-index: 2;
+
+  border-radius: 2px;
+  border: 1px solid var(--global-color-black-100);
+
+  padding: var(--srl-spacing-200) var(--srl-spacing-300);
+
+  overflow: hidden;
+
+  &.open {
+    overflow: visible;
+  }
+}
+
+.iz-kfc-dropdown--charts {
+  z-index: 3;
+}
+
+.iz-kfc-dropdown {
+  border-radius: 4.5px;
+  border: 2px solid var(--srl-color-dark);
+
+  &.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.iz-kfc-dropdown__title,
+.iz-kfc-dropdown__item-chart,
+.iz-kfc-dropdown__item--period,
+.iz-kfc-dropdown__item-serie--charts {
+  cursor: pointer;
+}
+
+.iz-kfc-dropdown__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-size: var(--srl-typo-h3-font-size, unset);
+  font-weight: var(--srl-typo-headline2-font-weight, unset);
+
+  .svg-kfc-dropdown {
+    transition: transform 0.25s ease;
+  }
+
+  .iz-kfc-dropdown.open & {
+    .svg-kfc-dropdown {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.iz-kfc-dropdown__item {
+  padding: 0 var(--srl-spacing-300);
+
+  &:not(:first-of-type) {
+    border-top: 1px solid var(--srl-color-dark);
+  }
+}
+
+.iz-kfc-dropdown__item-chart {
+  display: flex;
+  cursor: pointer;
+
+  font-size: var(--srl-typo-headline3-font-size, unset);
+  line-height: var(--srl-typo-headline3-line-height, unset);
+  font-style: var(--srl-typo-headline3-font-style, normal);
+  font-weight: var(--srl-typo-headline3-font-weight, unset);
+
+  color: var(--srl-color-secondary_dunkelgrau--100);
+
+  &:hover {
+    color: var(--srl-color-dark);
+  }
+
+  &.active {
+    color: var(--srl-color-dark);
+    padding-bottom: var(--srl-spacing-300);
+  }
+
+  > span {
+    width: 100%;
+  }
+}
+
+.iz-kfc-dropdown__list {
+  .open & {
+    border: 2px solid var(--srl-color-dark);
+  }
+
+  border-bottom-left-radius: 4.5px;
+  border-bottom-right-radius: 4.5px;
+  display: block;
+  position: absolute;
+  top: 100%;
+  left: -2px;
+  max-height: 0;
+
+  min-width: calc(100% + 4px);
+  z-index: 2;
+  background: white;
+  transition: max-height 0.4s ease;
+  overflow-y: auto;
+}
+
+.iz-kfc-dropdown.open .iz-kfc-dropdown__list {
+  display: block;
+  max-height: 400px;
+}
+
+.iz-kfc-dropdown__item-chart {
+  padding-top: var(--srl-spacing-200);
+  padding-bottom: var(--srl-spacing-200);
+}
+
+.iz-kfc-dropdown__item--period {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.iz-kfc-dropdown__item--period,
+.iz-kfc-dropdown__item-serie {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  font-size: var(--srl-typo-headline3-font-size, unset);
+  line-height: var(--srl-typo-headline3-line-height, unset);
+}
+
+.iz-kfc-dropdown__item.iz-kfc-dropdown__item--period {
+  border: unset;
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  &:first-child {
+    padding-top: var(--srl-spacing-200);
+  }
+  &:last-child {
+    padding-bottom: var(--srl-spacing-200);
+  }
+}
+
+.iz-kfc-dropdown__item-serie {
+  margin: 6px 0;
+  &:nth-child(2) {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: var(--srl-spacing-200);
+  }
+}
+
+.iz-kfc-dropdown__item--period .indicator,
+.iz-kfc-dropdown__item-serie .indicator {
+  margin-right: 10px;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--srl-color-dark);
+  border-radius: 2px;
+  position: relative;
+  flex-shrink: 0;
+
+  svg {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 13px;
+    height: 13px;
+  }
+}
+
+.iz-kfc-dropdown__item--period.active .indicator,
+.iz-kfc-dropdown__item-serie.active .indicator {
+  svg {
+    display: block;
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_iz-keyfigure-comparison.scss

@@ -0,0 +1,151 @@
+@use 'nswow';
+
+.iz-keyfigure-comparison {
+  --srl-spacing-200: 16px;
+  --srl-spacing-300: 24px;
+}
+
+.kfc-tooltip {
+  border: 0;
+}
+
+.srl-article__grid--kfc {
+  --srl-gutter-columns: 4;
+
+  @include nswow.grid-media-up(portrait) {
+    --srl-gutter-columns: 8;
+  }
+
+  @include nswow.grid-media-up(landscape) {
+    --srl-gutter-columns: 12;
+  }
+}
+
+.srl-article__grid--kfc > .srl-article__grid--inner {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: auto / span var(--srl-gutter-columns);
+  gap: calc(var(--srl-gutter-column-gap) / 2) var(--srl-gutter-column-gap);
+
+  @include nswow.grid-media-up(portrait) {
+    grid-column: auto / span 8;
+  }
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column-start: 3;
+  }
+}
+
+.iz-kfc-dropdown--charts {
+  grid-column: auto / span 4;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 5;
+  }
+}
+
+.iz-kfc-dropdown--periods {
+  grid-column: auto / span 4;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 3;
+  }
+}
+
+.kfc-chart-title {
+  grid-column: auto / span 4;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 4;
+  }
+}
+
+.kfc-chart-actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-self: center;
+  gap: nswow.system-size-unit(24);
+  grid-column: auto / span 4;
+
+  @include nswow.grid-media-up(portrait) {
+    justify-content: end;
+    gap: nswow.system-size-unit(36);
+    grid-column: auto / span 4;
+  }
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 4;
+    gap: nswow.system-size-unit(48);
+  }
+}
+
+.iz-kfc-chart-types,
+.iz-kfc-chart-toggles {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-self: center;
+  gap: nswow.system-size-unit(24);
+  grid-column: auto / span 2;
+
+  @include nswow.grid-media-up(portrait) {
+    grid-column: auto / span 4;
+    gap: nswow.system-size-unit(36);
+  }
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 4;
+    gap: nswow.system-size-unit(48);
+  }
+}
+
+.iz-kfc-chart-toggles {
+  justify-content: end;
+}
+
+.iz-keyfigure-comparison__chart {
+  grid-column: auto / span 12;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 8;
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.iz-keyfigure-comparison__table {
+  grid-column: auto / span 12;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 8;
+  }
+
+  .kfc-table-wrapper {
+    overflow: auto;
+  }
+
+  .kfc-table-wrapper.hidden {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .noline {
+    width: 14px;
+  }
+}
+
+.iz-keyfigure-comparison__footnote {
+  grid-column: auto / span 12;
+
+  @include nswow.grid-media-up(landscape) {
+    grid-column: auto / span 8;
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_kfc-loading.scss

@@ -0,0 +1,40 @@
+@use 'nswow';
+
+.loading-text {
+  grid-column: auto / span 4;
+  text-align: center;
+
+  @include nswow.grid-media-up(portrait) {
+    grid-column: auto / span 8;
+  }
+}
+
+.loader-container {
+  display: flex;
+  justify-self: center;
+  grid-column: auto / span 4;
+
+  @include nswow.grid-media-up(portrait) {
+    grid-column: auto / span 8;
+  }
+}
+
+.loader {
+  display: inline-block;
+  width: 100px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--srl-color-primary);
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_kfc-print.scss

@@ -0,0 +1,20 @@
+@media print {
+  .srl-subnavigation__wrap,
+  .srl-title-h2,
+  .iz-kfc-dropdown,
+  .kfc-chart-actions,
+  .iz-kfc-chart-types,
+  .iz-kfc-chart-toggles,
+  .srl-button-download,
+  .srl-button-next,
+  .srl-footnav,
+  .srl-page__footer {
+    display: none !important;
+  }
+
+  .srl-article__grid--kfc,
+  .srl-article__grid--kfc > .srl-article__grid--inner,
+  .kfc-chart-title {
+    display: block !important;
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_srl-button-kfc.scss

@@ -0,0 +1,21 @@
+@use 'nswow';
+
+.srl-button-kfc {
+  padding: 0;
+  margin: 0;
+  background: none;
+  -webkit-appearance: none;
+  border: none;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: nswow.system-size-unit(12);
+  cursor: pointer;
+  color: var(--srl-color-dark);
+
+  &:hover {
+    color: var(--srl-color-primary);
+  }
+}

package/dev/src/components/SrlPage/KFCApplication/scss/_variables.scss

@@ -0,0 +1,10 @@
+$colors-highcharts: #007b91 #70c3d4 #009d5a #afcd5f #99cad3 #c5e7ed #99d7bd #dfebbf #f18fb9 #f9d2e3
+  #bd0075;
+
+$layout-breakpoints: (
+  xs: 480px,
+  sm: 768px,
+  md: 992px,
+  lg: 1025px,
+  xl: 1433px
+) !default;