@design-factory/design-factory 15.2.0

package/styles/scss/components/pagination/_pagination.scss

@@ -0,0 +1,195 @@
+@mixin df-pagination-size($size, $border-radius, $font-size, $icon-left-offset, $transformX-offset) {
+  .page-item {
+    .page-link {
+      height: $size;
+      min-width: $size;
+      border-radius: $border-radius;
+      line-height: $size;
+      font-size: $font-size;
+    }
+    .page-link[aria-label] {
+      span:after {
+        font-size: $font-size !important; // needs to override the styles of @extend %df-icon-style;
+        @include ltr {
+          left: $icon-left-offset !important; // needs to override the styles of @extend %df-icon-style;
+          transform: translateX($transformX-offset);
+        }
+        @include rtl {
+          right: $icon-left-offset !important;
+          transform: translateX(-$transformX-offset);
+        }
+        line-height: $size !important;
+        // needs to override the styles of @extend %df-icon-style;
+      }
+    }
+  }
+  .page-item + .page-item {
+    @include ltr {
+      margin-left: $df-pagination-between-list-item-space;
+    }
+    @include rtl {
+      margin-right: $df-pagination-between-list-item-space;
+    }
+  }
+}
+@mixin replace-span-innertext-with-icon($iconContent) {
+  .page-link[aria-label] {
+    border-radius: $df-pagination-direction-border-radius;
+    span {
+      font-size: 0px; // use this trick because visibility: hidden is not working correctly on IE (it also hides the :after content)
+      text-decoration: none;
+    }
+    span:after {
+      color: $df-pagination-icon-color;
+      @extend %df-icon-style;
+      position: absolute;
+      content: $iconContent;
+    }
+  }
+}
+
+.df-custom-pages-input {
+  min-width: $df-custom-pages-input-minwidth;
+}
+
+.pagination {
+  --df-pagination-focus-color: var(--df-pagination-color);
+  --df-pagination-focus-bg: var(--df-pagination-bg);
+  margin-bottom: $df-pagination-margin-bottom;
+  .page-item {
+    .page-link {
+      border: none;
+      text-align: center;
+      margin: 0 0.0625rem; // 0.0625rem = 1px with font-size=16
+      &:hover {
+        z-index: 1;
+        text-decoration: underline;
+      }
+      &:focus {
+        z-index: 2;
+        &:hover {
+          --df-pagination-focus-bg: var(--df-pagination-hover-bg);
+        }
+      }
+      z-index: initial; // overides z-index: 2 so that it is below the active page link
+    }
+    &.disabled {
+      cursor: $df-pagination-disabled-cursor;
+    }
+    .page-link[aria-label] {
+      &:hover {
+        span:after {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  .page-item.active .page-link {
+    z-index: 2;
+  }
+  .page-item.disabled .page-link span:after {
+    color: $pagination-disabled-color !important;
+  }
+  // TODO: First Part When icons customization feature will be added to ngbootstrap, use it and remove following css
+  // Link to ngbootsrap issue : https://github.com/ng-bootstrap/ng-bootstrap/issues/899
+  // css style to modify the arrow texts with DF icons
+  // first case: boundaryLinks = false
+  li.page-item:nth-of-type(1) {
+    @include ltr {
+      @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+    }
+    @include rtl {
+      @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
+    }
+  }
+  li.page-item:nth-last-of-type(1) {
+    @include ltr {
+      @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
+    }
+    @include rtl {
+      @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+    }
+  }
+  // css style to handle the different sizes of pagination (sm, lg, ...)
+  @include df-pagination-size(
+    $df-pagination-size-base,
+    $df-pagination-border-radius-base,
+    $font-size-base,
+    $df-pagination-icon-left-offset-base,
+    $df-pagination-icon-translateX-offset
+  );
+  &.pagination-lg {
+    @include df-pagination-size(
+      $df-pagination-size-lg,
+      $df-pagination-border-radius-lg,
+      $font-size-lg,
+      $df-pagination-icon-left-offset-lg,
+      $df-pagination-icon-translateX-offset
+    );
+    .df-custom-pages-input {
+      min-width: $df-custom-pages-input-minwidth-lg;
+    }
+  }
+
+  &.pagination-sm {
+    @include df-pagination-size(
+      $df-pagination-size-sm,
+      $df-pagination-border-radius-sm,
+      $font-size-sm,
+      $df-pagination-icon-left-offset-sm,
+      $df-pagination-icon-translateX-offset
+    );
+
+    .df-custom-pages-input {
+      min-width: $df-custom-pages-input-minwidth-sm;
+    }    
+  }
+}
+
+.df-custom-pages {
+  .pagination-sm {
+    align-items: $df-custom-pages-sm-vertical-alignment;
+    .page-item {
+      height: fit-content;
+      height: -moz-max-content;
+    }
+  }
+}
+// TODO: Second Part
+// second case: boundaryLinks = true
+.with-boundary-links {
+  .pagination {
+    .page-item:nth-of-type(1) {
+      @include ltr {
+        @include replace-span-innertext-with-icon($df-pagination-first-icon-code);
+      }
+      @include rtl {
+        @include replace-span-innertext-with-icon($df-pagination-last-icon-code);
+      }
+    }
+    .page-item:nth-of-type(2) {
+      @include ltr {
+        @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+      }
+      @include rtl {
+        @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
+      }
+    }
+    .page-item:nth-last-of-type(2) {
+      @include ltr {
+        @include replace-span-innertext-with-icon($df-pagination-next-icon-code);
+      }
+      @include rtl {
+        @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
+      }
+    }
+    .page-item:nth-last-of-type(1) {
+      @include ltr {
+        @include replace-span-innertext-with-icon($df-pagination-last-icon-code);
+      }
+      @include rtl {
+        @include replace-span-innertext-with-icon($df-pagination-first-icon-code);
+      }
+    }
+  }
+}

package/styles/scss/components/pagination/_pagination.variables.scss

@@ -0,0 +1,27 @@
+$df-pagination-size-base: 2.25rem !default;
+$df-pagination-size-sm: 1.75rem !default;
+$df-pagination-size-lg: 3rem !default;
+
+$df-pagination-border-radius-base: 0.175rem !default;
+$df-pagination-border-radius-sm: 0.15rem !default;
+$df-pagination-border-radius-lg: 0.2rem !default;
+
+$df-pagination-icon-left-offset-base: 50% !default;
+$df-pagination-icon-left-offset-lg: $df-pagination-icon-left-offset-base !default;
+$df-pagination-icon-left-offset-sm: $df-pagination-icon-left-offset-base !default;
+$df-pagination-icon-color: $df-font-icon-color !default;
+$df-pagination-icon-translateX-offset: -$df-pagination-icon-left-offset-base !default;
+
+$df-pagination-first-icon-code: '\ef22' !default; // .icon-df-first-item
+$df-pagination-previous-icon-code: '\ea32' !default; // .icon-chevron-left
+$df-pagination-next-icon-code: '\ea33' !default; // .icon-chevron-right
+$df-pagination-last-icon-code: '\ef23' !default; // .icon-df-last-item
+
+$df-pagination-disabled-cursor: $df-disabled-cursor !default;
+$df-pagination-direction-border-radius: 50% !default;
+$df-pagination-between-list-item-space: 0.2rem !default;
+$df-pagination-margin-bottom: 0px !default; // reset the ul margin.
+$df-custom-pages-input-minwidth-sm: 32px !default;
+$df-custom-pages-input-minwidth: 40px !default;
+$df-custom-pages-input-minwidth-lg: 48px !default;
+$df-custom-pages-sm-vertical-alignment: center !default;

package/styles/scss/components/pagination/_pagination_container.scss

@@ -0,0 +1,14 @@
+#{$df-css-namespace-selector} {
+  .active > .page-link {
+    z-index: 3;
+    color: var(--#{$prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+    border-color: var(--#{$prefix}pagination-active-border-color);
+  }
+  .disabled > .page-link {
+    color: var(--#{$prefix}pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}pagination-disabled-bg);
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
+  }
+}

package/styles/scss/components/popover/_popover.mixin.scss

@@ -0,0 +1,57 @@
+@mixin popover-mixin {
+  @if $enable-shadows == false {
+    box-shadow: var(--#{$prefix}popover-box-shadow);
+  }
+  padding: $df-popover-padding;
+  @include media-breakpoint-up(xs) {
+    max-width: $df-popover-max-width-mobile;
+  }
+  @include media-breakpoint-up(sm) {
+    max-width: $df-popover-max-width;
+  }
+
+  &.bs-popover-top:not(.bs-popover-top-left):not(.bs-popover-top-right) .arrow,
+  &.bs-popover-bottom:not(.bs-popover-bottom-left):not(.bs-popover-bottom-right) .arrow {
+    transform: translateX(-50%);
+  }
+
+  &.bs-popover-left:not(.bs-popover-left-top):not(.bs-popover-left-bottom) .arrow,
+  &.bs-popover-right:not(.bs-popover-right-top):not(.bs-popover-right-bottom) .arrow {
+    transform: translateY(-50%);
+  }
+
+  .popover-header {
+    margin: $df-popover-header-default-margin;
+    font-size: $h3-font-size;
+    line-height: $df-popover-header-line-height;
+  }
+
+  .popover-body {
+    margin: $df-popover-body-default-margin;
+    font-size: $font-size-base;
+  }
+  &.popover-sm {
+    padding: $df-popover-sm-padding;
+    .popover-header {
+      margin: $df-popover-header-sm-margin;
+      font-size: $h4-font-size;
+    }
+
+    .popover-body {
+      margin: $df-popover-body-sm-margin;
+      font-size: $font-size-sm;
+    }
+  }
+  &.popover-lg {
+    padding: $df-popover-lg-padding;
+    .popover-header {
+      margin: $df-popover-header-lg-margin;
+      font-size: $h2-font-size;
+    }
+
+    .popover-body {
+      margin: $df-popover-body-lg-margin;
+      font-size: $font-size-lg;
+    }
+  }
+}

package/styles/scss/components/popover/_popover.scss

@@ -0,0 +1,25 @@
+@import 'popover.mixin';
+
+.popover {
+  @include popover-mixin;
+}
+
+.bs-popover-top {
+  margin-bottom: $popover-arrow-height + $df-popover-margin;
+}
+
+.bs-popover-right {
+  margin-left: $popover-arrow-height + $df-popover-margin;
+}
+
+.bs-popover-bottom {
+  margin-top: $popover-arrow-height + $df-popover-margin;
+}
+
+.bs-popover-left {
+  margin-right: $popover-arrow-height + $df-popover-margin;
+}
+
+.popover-header {
+  border-bottom: none;
+}

package/styles/scss/components/popover/_popover.variables.scss

@@ -0,0 +1,18 @@
+$df-popover-margin: 0.625rem !default;
+$df-popover-max-width-mobile: 270px !default;
+$df-popover-max-width: 50vw !default;
+
+$df-popover-padding: 1rem !default;
+$df-popover-sm-padding: 0.75rem !default;
+$df-popover-lg-padding: 1.5rem !default;
+
+$df-popover-header-line-height: 1.2 !default;
+
+$df-popover-header-sm-margin: 0 0 0.5rem !default;
+$df-popover-body-sm-margin: 0 !default;
+
+$df-popover-header-default-margin: 0 0 0.75rem !default;
+$df-popover-body-default-margin: 0 !default;
+
+$df-popover-header-lg-margin: 0 0 1rem !default;
+$df-popover-body-lg-margin: 0 !default;

package/styles/scss/components/popover/_popover_container.scss

@@ -0,0 +1,156 @@
+@import 'popover.mixin';
+
+#{$df-css-namespace-selector} {
+  &.popover {
+    @include popover-mixin();
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: $zindex-popover;
+    display: block;
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    @include reset-text();
+    @include font-size($popover-font-size);
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    word-wrap: break-word;
+    background-color: $popover-bg;
+    background-clip: padding-box;
+    border: $popover-border-width solid $popover-border-color;
+    @include border-radius($popover-border-radius);
+
+    @if $enable-shadows {
+      @include box-shadow(var(--#{$prefix}popover-box-shadow));
+    } @else {
+      box-shadow: var(--#{$prefix}popover-box-shadow);
+    }
+
+    .popover-arrow {
+      position: absolute;
+      display: block;
+      width: $popover-arrow-width;
+      height: $popover-arrow-height;
+
+      &::before,
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        border-color: transparent;
+        border-style: solid;
+      }
+    }
+  }
+
+  &.bs-popover-top {
+    margin-bottom: $popover-arrow-height + $df-popover-margin;
+
+    > .popover-arrow {
+      bottom: subtract(-$popover-arrow-height, $popover-border-width);
+
+      &::before {
+        bottom: 0;
+        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
+        border-top-color: $popover-arrow-outer-color;
+      }
+  
+      &::after {
+        bottom: $popover-border-width;
+        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
+        border-top-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.bs-popover-right {
+    margin-left: $popover-arrow-height + $df-popover-margin;
+
+    > .popover-arrow {
+      left: subtract(-$popover-arrow-height, $popover-border-width);
+      width: $popover-arrow-height;
+      height: $popover-arrow-width;
+
+      &::before {
+        left: 0;
+        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
+        border-right-color: $popover-arrow-outer-color;
+      }
+  
+      &::after {
+        left: $popover-border-width;
+        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
+        border-right-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.bs-popover-bottom {
+    margin-top: $popover-arrow-height + $df-popover-margin;
+
+    > .popover-arrow {
+      top: subtract(-$popover-arrow-height, $popover-border-width);
+
+      &::before {
+        top: 0;
+        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+        border-bottom-color: $popover-arrow-outer-color;
+      }
+  
+      &::after {
+        top: $popover-border-width;
+        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+        border-bottom-color: $popover-arrow-color;
+      }
+    }
+
+    // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: $popover-arrow-width;
+      margin-left: -$popover-arrow-width * .5;
+      content: '';
+      border-bottom: $popover-border-width solid $popover-header-bg;
+    }
+  }
+
+  &.bs-popover-left {
+    margin-right: $popover-arrow-height + $df-popover-margin;
+
+    > .popover-arrow {
+      right: subtract(-$popover-arrow-height, $popover-border-width);
+      width: $popover-arrow-height;
+      height: $popover-arrow-width;
+
+      &::before {
+        right: 0;
+        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
+        border-left-color: $popover-arrow-outer-color;
+      }
+  
+      &::after {
+        right: $popover-border-width;
+        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
+        border-left-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.bs-popover-auto {
+    &[data-popper-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[data-popper-placement^="right"] {
+      @extend .bs-popover-end;
+    }
+    &[data-popper-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[data-popper-placement^="left"] {
+      @extend .bs-popover-start;
+    }
+  }
+}

package/styles/scss/components/progressbar/_progressbar.scss

@@ -0,0 +1,74 @@
+.progress-bar {
+  position: relative;
+  border-radius: $progress-border-radius;
+  &.infinite-animation {
+    width: 20%;
+
+    @include ltr {
+      animation-name: infinite-animation;
+    }
+    @include rtl {
+      animation-name: infinite-animation-rtl;
+    }
+    animation-duration: $df-infinite-animation-duration;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+}
+
+@keyframes infinite-animation {
+  //The progressbar is hidden at the beginning because it is too far on the left
+  0% {
+    left: -35%;
+  }
+  // At 75% of the animation time frame, the progressbar is hidden because it is too far on the right
+  75% {
+    left: 100%;
+  }
+  // Between 75% and 100% of the time frame, the progressbar stays hidden
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes infinite-animation-rtl {
+  //The progressbar is hidden at the beginning because it is too far on the left
+  0% {
+    right: -35%;
+  }
+  // At 75% of the animation time frame, the progressbar is hidden because it is too far on the right
+  75% {
+    right: 100%;
+  }
+  // Between 75% and 100% of the time frame, the progressbar stays hidden
+  100% {
+    right: 100%;
+  }
+}
+
+.df-dark-background-version {
+  .progress {
+    background-color: $df-darkBackgroundVersion-progressbar-background-color;
+  }
+  .progress-bar {
+    background-color: $df-darkBackgroundVersion-progressbar-color;
+  }
+}
+
+.progressbar-text {
+  color: $df-text-color;
+}
+
+// stylelint-disable-next-line selector-type-no-unknown
+df-progressbar {
+  display: $df-progress-bar-display;
+}
+
+.df-progressindicator-container {
+  df-progressbar {
+    flex-grow: 1;
+    .progress {
+      border-radius: 0;
+    }
+  }
+}

package/styles/scss/components/progressbar/_progressbar.variables.scss

@@ -0,0 +1,13 @@
+$df-infinite-animation-duration: 2.2s !default; // can be changed to speed-up or slow down the infinite animation
+$df-text-color: $gray-600 !default;
+$df-progress-bar-display: block !default;
+
+/**
+  Color of the progressbar background (~color of the progressbar with 0% progress) for the 'dark background' version
+*/
+$df-darkBackgroundVersion-progressbar-background-color: $dark-primary !default;
+
+/**
+  Color of the progressbar (~color of the progressbar with 100% progress) for the 'dark background' version
+*/
+$df-darkBackgroundVersion-progressbar-color: white !default;

package/styles/scss/components/radio/_radio.scss

@@ -0,0 +1,25 @@
+div[role='radiogroup'] {
+  > span {
+    font-weight: bold;
+    font-size: $df-fieldset-legend-font-size;
+    display: block;
+    margin-bottom: $df-radiogroup-legend-margin-bottom;
+  }
+}
+
+.form-check-input {
+  &:checked {
+    &[type="radio"] {
+      background-color: $df-form-check-radio-checked-bg-color;
+
+      &.disabled,
+      &[disabled] {
+        @if $enable-gradients {
+          background-image: escape-svg($df-form-check-radio-checked-disabled-bg-image), var(--#{$variable-prefix}gradient);
+        } @else {
+          background-image: escape-svg($df-form-check-radio-checked-disabled-bg-image);
+        }
+      }
+    }
+  }
+}

package/styles/scss/components/radio/_radio.variables.scss

@@ -0,0 +1,3 @@
+$df-form-check-radio-checked-bg-color: $white !default;
+$df-form-check-radio-checked-disabled-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$gray-300}'/></svg>") !default;
+$df-radiogroup-legend-margin-bottom: 0.5rem !default;

package/styles/scss/components/rating/_rating.scss

@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+// stylelint-disable-next-line selector-type-no-unknown
+ngb-rating {
+  font-size: $df-rating-font-size;
+  color: $df-rating-color;
+  $star-margin: math.div($df-rating-star-to-star-distance, 2);
+  margin: $df-rating-number-to-stars-distance - $star-margin;
+  span {
+    margin: $star-margin;
+  }
+
+  // focus properties, avoid resizing of element
+  outline: $df-rating-focus-outline;
+  border: $df-rating-border;
+  border-radius: $df-rating-border-radius;
+  box-shadow: $df-rating-box-shadow;
+  border-color: $df-rating-border-color;
+
+  &:not([aria-disabled='true']):focus {
+    border: $df-rating-focus-border;
+    box-shadow: $df-rating-box-shadow;
+  }
+
+  &:hover {
+    color: $df-rating-hover-color;
+  }
+
+  &:active {
+    color: $df-rating-active-color;
+  }
+
+  &[aria-disabled='true'] {
+    color: $df-rating-disabled-color;
+    cursor: $df-rating-disabled-cursor;
+    span {
+      cursor: $df-rating-disabled-cursor !important;
+    }
+  }
+
+  &.ng-invalid {
+    @extend .text-danger;
+  }
+
+  //the 0px margins belows ensure that the full stars overlap the empty ones
+  .df-rating-decimal {
+    margin-right: 0;
+    margin-bottom: 0;
+    position: relative;
+    display: inline-block;
+    @include ltr {
+      .df-rating-decimal-half {
+        left: 0;
+      }
+    }
+    @include rtl {
+      .df-rating-decimal-half {
+        right: 0;
+        margin-right: 0;
+      }
+    }
+
+    .df-rating-decimal-half {
+      margin-left: 0;
+      margin-top: 0;
+      position: absolute;
+      display: inline-block;
+      overflow: hidden;
+    }
+  }
+
+  .df-rating-tiny {
+    color: $df-rating-tiny-color;
+  }
+}
+
+@each $extension, $ratio in $df-size-ratios {
+  ngb-rating.df-rating-#{$extension} {
+    font-size: $ratio * $df-rating-font-size;
+  }
+}