Release 1.6.0

Author: idzark

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 1.6.0 (27.12.2021)
+
+### Dependencies:
+
+- Updated Bootstrap to 5.1.3 version.
+
+### Fixes and improvements:
+
+- Charts - resolved problem with `chartjs-plugin-datalabels` configuration,
+- Carousel - component should now work correctly inside components with `OnPush` change detection strategy,
+- Table - updated `dataSource` type to resolve problem with asynchronous data and async pipe,
+- File upload plugin - resolved problem with extensions handled by the `acceptedExtensions` input,
+- Popconfirm - target element will be now optional in modal display mode,
+- Sidenav - resolved problem with `child.querySelector is not a function` error when using `ngFor` directive to render sidenav items,
+- Popover - `mdbPopover` input will now correctly accept value with `TemplateRef` type.
+
+### New:
+
+- Dropdown - added new `closeOnOutsideClick`, `closeOnItemClick`, `closeOnEsc` inputs that allow to configure menu closing actions,
+- File upload plugin - added a new `reset` method that allow to reset component state to default settings.
+
+---
+
 ## 1.5.1 (22.11.2021)
 
 ### Fixes and improvements

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 1.5.0
+Version: FREE 1.6.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/angular/

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

package.json

@@ -1,3 +1,26 @@
+## 1.6.0 (27.12.2021)
+
+### Dependencies:
+
+- Updated Bootstrap to 5.1.3 version.
+
+### Fixes and improvements:
+
+- Charts - resolved problem with `chartjs-plugin-datalabels` configuration,
+- Carousel - component should now work correctly inside components with `OnPush` change detection strategy,
+- Table - updated `dataSource` type to resolve problem with asynchronous data and async pipe,
+- File upload plugin - resolved problem with extensions handled by the `acceptedExtensions` input,
+- Popconfirm - target element will be now optional in modal display mode,
+- Sidenav - resolved problem with `child.querySelector is not a function` error when using `ngFor` directive to render sidenav items,
+- Popover - `mdbPopover` input will now correctly accept value with `TemplateRef` type.
+
+### New:
+
+- Dropdown - added new `closeOnOutsideClick`, `closeOnItemClick`, `closeOnEsc` inputs that allow to configure menu closing actions,
+- File upload plugin - added a new `reset` method that allow to reset component state to default settings.
+
+---
+
 ## 1.5.1 (22.11.2021)
 
 ### Fixes and improvements

projects/mdb-angular-ui-kit/CHANGELOG.md

@@ -13,6 +13,7 @@
   background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+  @include box-shadow($card-box-shadow);
 
   > hr {
     margin-right: 0;
@@ -55,7 +56,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-title-spacer-y / 2;
+  margin-top: -$card-title-spacer-y * 0.5;
   margin-bottom: 0;
 }
 
@@ -65,7 +66,7 @@
 
 .card-link {
   &:hover {
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   + .card-link {
@@ -105,9 +106,9 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * 0.5;
   margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-left: -$card-cap-padding-x * 0.5;
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -119,8 +120,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-cap-padding-x / 2;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * 0.5;
+  margin-left: -$card-cap-padding-x * 0.5;
 }
 
 // Card image

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss

@@ -207,9 +207,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
+  right: (100% - $carousel-caption-width) * 0.5;
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) / 2;
+  left: (100% - $carousel-caption-width) * 0.5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
   color: $carousel-caption-color;

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss

@@ -50,17 +50,17 @@
       --bs-position: start;
 
       &[data-bs-popper] {
-        right: auto #{'/* rtl:ignore */'};
-        left: 0 #{'/* rtl:ignore */'};
+        right: auto;
+        left: 0;
       }
     }
 
     .dropdown-menu#{$infix}-end {
       --bs-position: end;
 
       &[data-bs-popper] {
-        right: 0 #{'/* rtl:ignore */'};
-        left: auto #{'/* rtl:ignore */'};
+        right: 0;
+        left: auto;
       }
     }
   }

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss

@@ -32,6 +32,62 @@
   }
 }
 
+// Colors
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == 'body' and $target == 'bg' {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-bg-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  }
+  @if $identifier == 'body' and $target == 'text' {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-color-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  } @else {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  }
+}
+
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
+    }
+
+    $_map: map-merge(
+      $_map,
+      (
+        $key: call(get-function($func), $_args...),
+      )
+    );
+  }
+
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -60,6 +116,16 @@
   @return $result;
 }
 
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map-merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
@@ -101,7 +167,7 @@
 // Color contrast
 // See https://github.com/twbs/bootstrap/pull/30168
 
-// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
 $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033
   0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097
@@ -152,7 +218,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, ($l1 + 0.05) / ($l2 + 0.05), ($l2 + 0.05) / ($l1 + 0.05));
+  @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
 }
 
 // Return WCAG2.0 relative luminance
@@ -166,7 +232,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   );
 
   @each $name, $value in $rgb {
-    $value: if($value / 255 < 0.03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
+    $value: if(
+      divide($value, 255) < 0.03928,
+      divide(divide($value, 255), 12.92),
+      nth($_luminance-list, $value + 1)
+    );
     $rgb: map-merge(
       $rgb,
       (
@@ -240,9 +310,55 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1 - $value2;
   }
 
+  @if type-of($value2) != number {
+    $value2: unquote('(') + $value2 + unquote(')');
+  }
+
   @return if(
     $return-calc == true,
     calc(#{$value1} - #{$value2}),
     $value1 + unquote(' - ') + $value2
   );
 }
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss

@@ -12,6 +12,17 @@
   }
 }
 
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
 // Columns
 //
 // Common styles for small and large grid columns

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss

@@ -2,6 +2,8 @@
 @import 'helpers/colored-links';
 @import 'helpers/ratio';
 @import 'helpers/position';
+@import 'helpers/stacks';
 @import 'helpers/visually-hidden';
 @import 'helpers/stretched-link';
 @import 'helpers/text-truncation';
+@import 'helpers/vr';

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss

@@ -31,7 +31,7 @@
 }
 
 .figure-img {
-  margin-bottom: $spacer / 2;
+  margin-bottom: $spacer * 0.5;
   line-height: 1;
 }
 

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_images.scss

@@ -22,6 +22,7 @@
 
 // Components
 @import 'mixins/alert';
+@import 'mixins/backdrop';
 @import 'mixins/buttons';
 @import 'mixins/caret';
 @import 'mixins/pagination';