@ch-post-common/common-web-frontend 0.0.1-security → 1.0.933

package/components/datatable.scss

@@ -0,0 +1,147 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+
+@use "../variables/spacing";
+@use "../variables/components/pagination";
+@use "../variables/components/datatable";
+@use "../variables/components/forms";
+
+@use "../mixins/button" as button-mixins;
+
+
+.datatable-header-cell {
+  font-weight: datatable.$datatable-header-font-weight;
+  padding: datatable.$datatable-cell-padding;
+
+  .datatable-header[ng-reflect-sorts*="object"] &:not(.sort-active) {
+    color: datatable.$datatable-header-unsorted-color;
+  }
+
+  &-template-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  &-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .datatable-flush & {
+    border-bottom: datatable.$datatable-flush-border;
+  }
+}
+
+.datatable-body-cell {
+  padding: datatable.$datatable-cell-padding;
+  display: flex !important;
+  align-items: center;
+  background-color: datatable.$datatable-cell-bg;
+  margin-bottom: datatable.$datatable-cell-margin;
+
+  .datatable-spaced-cells & {
+    margin-right: datatable.$datatable-cell-margin;
+  }
+
+  .datatable-inverted & {
+    background-color: datatable.$datatable-inverted-cell-bg;
+  }
+
+  .datatable-flush &,
+  .datatable-striped-rows .datatable-row-odd & {
+    margin: 0;
+    background-color: transparent;
+  }
+
+  .datatable-flush & {
+    border-bottom: datatable.$datatable-flush-border;
+  }
+}
+
+.ngx-datatable .sort-btn {
+  flex: 0 0 auto;
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-left: spacing.$size-mini;
+  height: spacing.$size-small-large;
+  width: spacing.$size-small-regular;
+
+  &.datatable-icon-sort-unset {
+    background-image: datatable.$datatable-sort-asc-icon, datatable.$datatable-sort-desc-icon;
+    background-position: center top, center bottom;
+  }
+
+  &.datatable-icon-up {
+    background-image: datatable.$datatable-sort-asc-icon;
+    background-position: center center;
+  }
+
+  &.datatable-icon-down {
+    background-image: datatable.$datatable-sort-desc-icon;
+    background-position: center center;
+  }
+}
+
+.datatable-button-cell {
+  padding: 0;
+  align-items: stretch;
+
+  .datatable-body-cell-label {
+    flex-grow: 1;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .datatable-button {
+    @include button-mixins.reset-button;
+    padding: datatable.$datatable-cell-padding;
+    margin: datatable.$datatable-button-margin;
+    width: datatable.$datatable-button-width;
+    height: datatable.$datatable-button-height;
+    border-radius: 0;
+
+    &:focus {
+      outline: 0;
+      box-shadow: datatable.$datatable-button-focus-shadow;
+    }
+  }
+}
+
+.datatable-paginated-footer {
+  padding: datatable.$datatable-footer-padding;
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .datatable-row-count-label {
+    flex: 0 0 auto;
+    margin: 0 spacing.$size-mini 0 0;
+  }
+
+  .datatable-row-count-input {
+    flex: 0 0 datatable.$datatable-row-count-input-width;
+    border: none;
+    font-size: datatable.$datatable-row-count-font-size;
+    height: pagination.$pagination-height;
+
+    & + .datatable-pagination {
+      border-left: datatable.$datatable-footer-separator;
+      padding-left: spacing.$size-mini;
+    }
+  }
+
+  .datatable-pagination {
+    flex: 0 0 auto;
+
+    .pagination {
+      margin-bottom: 0;
+    }
+  }
+
+  .datatable-loader {
+    margin: auto;
+  }
+}

package/components/datepicker.scss

@@ -0,0 +1,220 @@
+
+@forward "../variables/options";
+
+@use "../variables/color";
+@use "../variables/components/datepicker";
+@use "../variables/components/forms";
+@use "../variables/commons";
+
+@import "../placeholders/floating-label";
+
+ngb-datepicker.dropdown-menu {
+  box-shadow: 0 0 8px 0 color.$gray-800;
+}
+
+.ngb-dp-weekday {
+  font-size: 1rem;
+  font-style: normal !important;
+  line-height: 1.47 !important;
+  color: color.$black-alpha-60 !important;
+}
+
+ngb-datepicker-navigation {
+  justify-content: space-between;
+}
+
+ngb-datepicker-navigation-select.ngb-dp-navigation-select {
+  flex: 0 1 auto;
+  
+  select {
+    border: none;
+    background-position: right;
+    padding-right: 1rem;
+  
+    &:focus {
+      background-color: transparent;
+      box-shadow: inset 0 0 0 commons.$border-thick color.$black;
+      border-radius: commons.$border-radius;
+    }
+
+    & + select {
+      margin-left: .5rem;
+    }
+  }
+}
+
+ngb-datepicker .ngb-dp-arrow {
+  flex-grow: 0;
+}
+
+.ngb-dp-header {
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  .ngb-dp-month-name {
+    font: inherit;
+    color: color.$black !important;
+    padding-top: .3rem;
+  }
+}
+
+.ngb-dp-navigation-select {
+  .custom-select {
+    background-color: transparent;
+    font: inherit;
+  }
+}
+
+span.ngb-dp-navigation-chevron {
+  border-width: .09em .09em 0 0;
+}
+
+.ngb-dp-weekday {
+  width: 40px !important;
+  height: auto !important;
+  font-weight: normal;
+}
+
+.ngb-dp-weekdays {
+  border-bottom: none !important;
+}
+
+.ngb-dp-day {
+  width: auto !important;
+  height: auto !important;
+}
+
+.ngb-dp-day > .btn-light {
+  width: 40px !important;
+  height: 40px !important;
+  line-height: 40px;
+}
+
+.ngb-dp-day > .text-white {
+  color: color.$black !important;
+}
+
+.ngb-dp-day > .btn-light,
+.ngb-dp-day > .btn-light:hover {
+  background: none;
+}
+
+.ngb-dp-day > .btn-light:hover {
+  background-color: color.$light;
+}
+
+.ngb-dp-day > .btn-light:not(:disabled):not(.disabled):active,
+.ngb-dp-day > .btn-light:not(:disabled):not(.disabled).active {
+  background-color: transparent;
+}
+
+.ngb-dp-day > .btn-light.bg-primary.text-white {
+  background-color: color.$yellow !important;
+}
+
+.ngb-dp-open {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  padding: datepicker.$ngb-dp-icon-padding;
+
+  i {
+    width: datepicker.$ngb-dp-icon-size;
+    height: datepicker.$ngb-dp-icon-size;
+  }
+}
+
+.form-control-sm ~ .ngb-dp-open {
+  padding: datepicker.$ngb-dp-icon-padding-sm;
+
+  i {
+    width: datepicker.$ngb-dp-icon-size-sm;
+    height: datepicker.$ngb-dp-icon-size-sm;
+  }
+}
+
+.form-control-rg ~ .ngb-dp-open {
+  padding: datepicker.$ngb-dp-icon-padding-rg;
+}
+
+.form-control-lg ~ .ngb-dp-open {
+  padding: datepicker.$ngb-dp-icon-padding-lg;
+
+  i {
+    width: datepicker.$ngb-dp-icon-size-lg;
+    height: datepicker.$ngb-dp-icon-size-lg;
+  }
+}
+
+input[ngbDatepicker] {
+  // Hide the x on IE/Edge input fields
+  &::-ms-clear {
+    display: none;
+  }
+
+  & ~ .btn {
+    border: none;
+  }
+
+  &.form-control-lg ~ label:first-of-type {
+    left: 0 !important;
+  }
+
+  & + ngb-datepicker {
+    .ngb-dp-header {
+      padding: 1rem;
+    }
+
+    .ngb-dp-weekdays {
+      padding: 0 1rem 1rem 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .ngb-dp-week {
+      padding-right: 1rem !important;
+      padding-left: 1rem !important;
+
+      &:last-child {
+        padding-bottom: 1rem;
+      }
+    }
+  }
+}
+
+.form-control[ngbDatepicker] {
+  &.is-invalid,
+  &.is-valid,
+  &.show-ng-validation.ng-touched.ng-invalid,
+  &.show-ng-validation.ng-touched.ng-valid {
+    padding-right: 1rem;
+    background-position: calc(100% - #{forms.$input-height-inner}) center;
+  }
+
+  &.form-control-lg {
+    &.is-invalid,
+    &.is-valid,
+    &.show-ng-validation.ng-touched.ng-invalid,
+    &.show-ng-validation.ng-touched.ng-valid {
+      background-position: calc(100% - #{forms.$input-height-inner-lg}) center !important;
+    }
+  }
+
+  &.form-control-rg {
+    &.is-invalid,
+    &.is-valid,
+    &.show-ng-validation.ng-touched.ng-invalid,
+    &.show-ng-validation.ng-touched.ng-valid {
+      background-position: calc(100% - #{forms.$input-height-inner-rg}) center;
+    }
+  }
+
+  &.form-control-sm {
+    &.is-invalid,
+    &.is-valid,
+    &.show-ng-validation.ng-touched.ng-invalid,
+    &.show-ng-validation.ng-touched.ng-valid {
+      background-position: calc(100% - #{forms.$input-height-inner-sm}) center;
+    }
+  }
+}

package/components/detail-summary.scss

@@ -0,0 +1,72 @@
+@use "../variables/components/detail-summary";
+@use "../variables/components/accordion";
+@use "../mixins/icons" as icon-mixin;
+@use "../themes/bootstrap/overrides" as *;
+@use "./icons.scss";
+
+details.accordion-item {
+  border-top: solid accordion.$accordion-border-width accordion.$accordion-border-color ;
+
+  &[open] {
+    summary {
+      color: accordion.$accordion-btn-text-color;
+
+      &::after {
+        transform: rotateZ(180deg);
+      }
+    }
+  }
+
+  summary {
+    font-size: detail-summary.$detail-summary-summary-font-size;
+    font-weight: detail-summary.$detail-summary-summary-font-weight;
+    color: accordion.$accordion-btn-text-color-expanded;
+    list-style-type: none;
+    position: relative;
+    padding: accordion.$accordion-trigger-padding-vertical accordion.$accordion-padding-horizontal-xs;
+    display: flex;
+    box-shadow: none;
+
+    @include media-breakpoint-up(sm) {
+      padding-right: accordion.$accordion-padding-horizontal-sm;
+      padding-left: accordion.$accordion-padding-horizontal-sm;
+    }
+
+    &:focus {
+      color: accordion.$accordion-btn-text-color;
+      outline: transparent;
+      box-shadow: $input-focus-box-shadow;
+      transform: translateZ(0);
+    }
+
+    &:hover {
+      color: accordion.$accordion-btn-text-color;
+    }
+
+    &::after {
+      transition: transform detail-summary.$detail-summary-icon-transition-speed;
+      @include icon-mixin.pi(detail-summary.$detail-summary-icon, detail-summary.$detail-summary-icon-color);
+      content: "";
+      width: 1.5rem;
+      height: 1.5rem;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center right;
+      margin-left: auto;
+      flex: 0 0 auto;
+    }
+  }
+
+  .accordion-body {
+    padding: accordion.$accordion-content-space-top accordion.$accordion-padding-horizontal-xs accordion.$accordion-content-space-bottom-xs;
+
+    @include media-breakpoint-up(sm) {
+      padding-right: accordion.$accordion-padding-horizontal-sm;
+      padding-left: accordion.$accordion-padding-horizontal-sm;
+    }
+
+    @include media-breakpoint-up(rg) {
+      padding-bottom: accordion.$accordion-content-space-bottom-rg;
+    }
+  }
+}

package/components/dropdown.scss

@@ -0,0 +1,71 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/dropdown" as bd;
+
+@use "../functions/icons";
+@use "../variables/color";
+@use "../variables/commons";
+@use "../variables/spacing";
+@use "../placeholders/dropdown";
+
+
+.dropdown,
+.dropup {
+  .dropdown-menu {
+    min-width: 200px;
+    max-width: 25vw;
+    max-height: 50vh;
+  }
+}
+
+.dropdown-menu {
+  font-size: 1rem;
+  margin-top: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: commons.$box-shadow;
+  overflow-y: auto;
+  z-index: commons.$zindex-fixed;
+
+  hr {
+    margin: .25rem 0;
+  }
+}
+
+.dropdown-toggle {
+  &::after {
+    @extend %toggler-icon;
+    background-image: url(icons.get-colored-svg-url("2052", color.$gray-800));
+  }
+
+  &[aria-expanded="true"] {
+    &::after {
+      background-image: url(icons.get-colored-svg-url("2051", color.$gray-800));
+    }
+  }
+
+  .dropup & {
+    &::after {
+      @extend %toggler-icon;
+      background-image: url(icons.get-colored-svg-url("2051", color.$gray-800));
+    }
+
+    &[aria-expanded="true"] {
+      &::after {
+        background-image: url(icons.get-colored-svg-url("2052", color.$gray-800));
+      }
+    }
+  }
+}
+
+.dropdown-item {
+  padding: .5rem .75rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:focus {
+    outline: 0;
+  }
+}

package/components/floating-label.scss

@@ -0,0 +1,65 @@
+@forward "../variables/options";
+
+@use "../variables";
+@use "../variables/components/forms";
+@use "../mixins/forms" as forms-mixins;
+@use "../mixins/utilities";
+@use "../placeholders/floating-label";
+
+.form-control-lg {
+  @extend %floating-label;
+}
+
+.form-control-lg {
+  @at-root {
+    textarea#{&} {
+      padding-top: forms.$floating-label-spacing-y + forms.$floating-label-font-size-small;
+
+      &:not([rows]) {
+        // = If no height is defined.
+        height: forms.$input-height-lg;
+      }
+
+      &+label {
+        z-index: 2;
+
+        //stylelint-disable-next-line max-nesting-depth
+        &::before {
+          content: "";
+          background-color: forms.$input-bg;
+          height: 100%;
+          position: absolute;
+          top: calc(#{forms.$floating-label-transition-distance} + #{forms.$input-border-width});
+          left: 0;
+          right: 0;
+          z-index: -1;
+        }
+      }
+    }
+
+    // IE applies different padding in Selects
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      select#{&} {
+        padding-left: forms.$floating-label-select-spacing-x-ie;
+      }
+    }
+
+  }
+}
+
+// Adjustment Firefox padding
+@-moz-document url-prefix() {
+  select.form-control-lg {
+    padding-left: forms.$floating-label-select-spacing-x-moz;
+  }
+}
+
+.show-ng-validation.ng-touched {
+  &.ng-valid {
+    @extend .is-valid;
+  }
+
+  &.ng-invalid {
+    @extend .is-invalid;
+  }
+}

package/components/fonts.scss

@@ -0,0 +1,35 @@
+@forward "../variables/options";
+
+@use "../variables/options";
+
+@font-face {
+  font-family: "Frutiger Neue For Post";
+  font-weight: 700;
+  src: url("#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),
+    url("#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Frutiger Neue For Post";
+  font-weight: 400;
+  src: url("#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),
+    url("#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Frutiger Neue For Post";
+  font-weight: 300;
+  src: url("#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),
+    url("#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Frutiger Neue For Post";
+  font-weight: 200;
+  src: url("#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),
+    url("#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff") format("woff");
+  font-display: swap;
+}

package/components/form-feedback.scss

@@ -0,0 +1,70 @@
+@forward "../variables/options";
+
+@use "../variables";
+@use "../variables/components/forms";
+@use "../variables/components/button";
+@use "../mixins/forms" as forms-mixins;
+
+.invalid-feedback {
+  background: forms.$form-feedback-invalid-bg;
+  color: forms.$form-feedback-invalid-text;
+  padding: button.$input-btn-padding-x / 2 button.$input-btn-padding-x;
+}
+
+.valid-feedback {
+  background: forms.$form-feedback-valid-bg;
+  color: forms.$form-feedback-valid-text;
+  padding: button.$input-btn-padding-x / 2 button.$input-btn-padding-x;
+}
+
+.valid-feedback.custom-feedback {
+  background: forms.$form-feedback-custom-bg;
+  color: forms.$form-feedback-custom-text;
+}
+
+.form-control {
+  .input-group & ~ .invalid-tooltip {
+    // This fix is necessary for IE, so the tooltip is displayed correctly in an input group.
+    left: 0;
+  }
+
+  &.is-valid {
+    @include forms-mixins.icon-placement();
+    background-image: forms.$form-feedback-valid-icon;
+
+    &:focus {
+      border-color: forms.$input-focus-border-color;
+    }
+
+    &.custom-feedback {
+      border-color: forms.$form-feedback-custom-color;
+
+      &:focus {
+        box-shadow: forms.$form-feedback-custom-box-shadow;
+      }
+    }
+  }
+
+  &.is-invalid {
+    @include forms-mixins.icon-placement();
+    background-image: forms.$form-feedback-invalid-icon;
+  }
+
+  @at-root select#{&},
+  &.custom-select {
+    &.is-invalid,
+    &.is-valid {
+      background-size: forms.$form-feedback-icon-size, forms.$custom-select-bg-size;
+      background-position: calc(100% - #{forms.$form-feedback-icon-offset}) center, calc(100% - #{variables.$spacer} - #{forms.$form-feedback-icon-size}) center !important;
+      padding-right: forms.$form-feedback-icon-size + variables.$spacer * 2 + forms.$form-feedback-icon-offset !important;
+    }
+
+    &.is-invalid {
+      background-image: forms.$form-feedback-invalid-icon, forms.$custom-select-indicator !important;
+    }
+
+    &.is-valid {
+      background-image: forms.$form-feedback-valid-icon, forms.$custom-select-indicator !important;
+    }
+  }
+}

package/components/forms.scss

@@ -0,0 +1,31 @@
+@forward "../variables/options";
+
+@use "../lic/cwf-license";
+@use "../lic/bootstrap-license";
+
+@use "../variables/components/forms";
+
+@use "../mixins/forms" as form-mixins;
+
+@use "../themes/bootstrap/forms" as bs-forms;
+@use "../themes/bootstrap/input-group";
+
+// TODO MIXINS
+
+.form-group {
+  // To contain floating labels
+  position: relative;
+}
+
+.form-control-rg {
+  @include form-mixins.form-control-rg;
+}
+
+select.form-control-rg:not([size]):not([multiple]) {
+  height: forms.$input-height-rg;
+}
+
+.form-control:disabled {
+  border-color: forms.$input-disabled-border-color;
+  color: forms.$input-disabled-color;
+}