Skip to content

Commit cf860bf

Browse files
idzarkidzark
committed
Release 8.0.0
1 parent 220ee26 commit cf860bf

File tree

132 files changed

+2287
-1142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+2287
-1142
lines changed

‎CHANGELOG.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
## 8.0.0 (07.04.2025)
2+
3+
This version requires Angular v19. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 19.
4+
5+
### Breaking changes:
6+
7+
- Updated Angular to v19, this version is required in MDB Angular v8
8+
- Older theming styles are no longer supported, use new [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
9+
- Slightly increased cell width in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
10+
- The `.navbar-light` class is no longer used in [Navbar](https://mdbootstrap.com/docs/angular/navigation/navbar), use [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
11+
12+
### Design updates:
13+
14+
Introduced a new theming system that allows setting the theme for the entire page, its parts, or selected elements using data attributes.
15+
16+
Read [Colors modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) page to learn more about new theming.
17+
18+
### Fixes and improvements:
19+
20+
- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - resolved problem with opening animation
21+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved problem with not hiding option groups labels when using filter
22+
- [Popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) - added default offset to the component
23+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - fixed date parsing bug for `yy` year format
24+
- [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/) - added 'Optional' text to the steps that use `optional` input
25+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added gap between the buttons and fixed border styles
26+
- Fixed [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) toggle button padding in Firefox browser
27+
- Removed unnecessary `BrowserAnimationsModule` imports from [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/), [Ecommerce gallery](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) and [Organization chart](https://mdbootstrap.com/docs/angular/plugins/organization-chart/) plugins
28+
29+
### New features:
30+
31+
- Added new SCSS and CSS variables for plugins styles
32+
- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/) - added new `mimeTypes` input that allow to define a list of mime types for supported file types
33+
- [Multi item carousel](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) - added new `(slideClick)` event
34+
- [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - added new `color-picker-next-format-button`, `color-picker-previous-format-button` and `color-picker-copy-button` classes for the buttons
35+
36+
---
37+
138
## 7.1.0 (18.11.2024)
239

340
### Fixes and improvements:

‎README.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 Angular
22

3-
Version: FREE 7.1.0
3+
Version: FREE 8.0.0
44

55
Documentation:
66
https://mdbootstrap.com/docs/angular/

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "7.1.0",
3+
"version": "8.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
## 8.0.0 (07.04.2025)
2+
3+
This version requires Angular v19. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 19.
4+
5+
### Breaking changes:
6+
7+
- Updated Angular to v19, this version is required in MDB Angular v8
8+
- Older theming styles are no longer supported, use new [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
9+
- Slightly increased cell width in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
10+
- The `.navbar-light` class is no longer used in [Navbar](https://mdbootstrap.com/docs/angular/navigation/navbar), use [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
11+
12+
### Design updates:
13+
14+
Introduced a new theming system that allows setting the theme for the entire page, its parts, or selected elements using data attributes.
15+
16+
Read [Colors modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) page to learn more about new theming.
17+
18+
### Fixes and improvements:
19+
20+
- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - resolved problem with opening animation
21+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved problem with not hiding option groups labels when using filter
22+
- [Popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) - added default offset to the component
23+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - fixed date parsing bug for `yy` year format
24+
- [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/) - added 'Optional' text to the steps that use `optional` input
25+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added gap between the buttons and fixed border styles
26+
- Fixed [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) toggle button padding in Firefox browser
27+
- Removed unnecessary `BrowserAnimationsModule` imports from [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/), [Ecommerce gallery](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) and [Organization chart](https://mdbootstrap.com/docs/angular/plugins/organization-chart/) plugins
28+
29+
### New features:
30+
31+
- Added new SCSS and CSS variables for plugins styles
32+
- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/) - added new `mimeTypes` input that allow to define a list of mime types for supported file types
33+
- [Multi item carousel](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) - added new `(slideClick)` event
34+
- [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - added new `color-picker-next-format-button`, `color-picker-previous-format-button` and `color-picker-copy-button` classes for the buttons
35+
36+
---
37+
138
## 7.1.0 (18.11.2024)
239

340
### Fixes and improvements:

‎projects/mdb-angular-ui-kit/accordion/accordion-item-content.directive.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export const MDB_ACCORDION_ITEM_BODY = new InjectionToken<MdbAccordionItemBodyDi
55
);
66

77
@Directive({
8-
// eslint-disable-next-line @angular-eslint/directive-selector
9-
selector: '[mdbAccordionItemBody]',
10-
providers: [{ provide: MDB_ACCORDION_ITEM_BODY, useExisting: MdbAccordionItemBodyDirective }],
11-
standalone: false
8+
// eslint-disable-next-line @angular-eslint/directive-selector
9+
selector: '[mdbAccordionItemBody]',
10+
providers: [{ provide: MDB_ACCORDION_ITEM_BODY, useExisting: MdbAccordionItemBodyDirective }],
11+
standalone: false,
1212
})
1313
export class MdbAccordionItemBodyDirective {
1414
constructor(public template: TemplateRef<any>) {}

‎projects/mdb-angular-ui-kit/accordion/accordion-item-header.directive.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export const MDB_ACCORDION_ITEM_HEADER = new InjectionToken<MdbAccordionItemHead
55
);
66

77
@Directive({
8-
// eslint-disable-next-line @angular-eslint/directive-selector
9-
selector: '[mdbAccordionItemHeader]',
10-
providers: [{ provide: MDB_ACCORDION_ITEM_HEADER, useExisting: MdbAccordionItemHeaderDirective }],
11-
standalone: false
8+
// eslint-disable-next-line @angular-eslint/directive-selector
9+
selector: '[mdbAccordionItemHeader]',
10+
providers: [{ provide: MDB_ACCORDION_ITEM_HEADER, useExisting: MdbAccordionItemHeaderDirective }],
11+
standalone: false,
1212
})
1313
export class MdbAccordionItemHeaderDirective {
1414
constructor(public template: TemplateRef<any>) {}

‎projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ let uniqueHeaderId = 0;
2121
let uniqueId = 0;
2222

2323
@Component({
24-
selector: 'mdb-accordion-item',
25-
templateUrl: './accordion-item.component.html',
26-
changeDetection: ChangeDetectionStrategy.OnPush,
27-
standalone: false
24+
selector: 'mdb-accordion-item',
25+
templateUrl: './accordion-item.component.html',
26+
changeDetection: ChangeDetectionStrategy.OnPush,
27+
standalone: false,
2828
})
2929
export class MdbAccordionItemComponent implements OnInit {
3030
@ContentChild(MDB_ACCORDION_ITEM_HEADER, { read: TemplateRef, static: true })

‎projects/mdb-angular-ui-kit/accordion/accordion.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { MdbAccordionItemComponent } from './accordion-item.component';
1313
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
1414

1515
@Component({
16-
selector: 'mdb-accordion',
17-
templateUrl: './accordion.component.html',
18-
changeDetection: ChangeDetectionStrategy.OnPush,
19-
standalone: false
16+
selector: 'mdb-accordion',
17+
templateUrl: './accordion.component.html',
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
standalone: false,
2020
})
2121
export class MdbAccordionComponent implements AfterContentInit {
2222
@ContentChildren(MdbAccordionItemComponent) items: QueryList<MdbAccordionItemComponent>;

‎projects/mdb-angular-ui-kit/accordion/accordion.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const template = `
4848
@Component({
4949
selector: 'mdb-accordion-test',
5050
template,
51+
standalone: false,
5152
})
5253
class TestAccordionComponent {
5354
@ViewChildren(MdbAccordionItemComponent) _accordionItems: QueryList<MdbAccordionItemComponent>;

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_accordion.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,12 @@
147147
}
148148
}
149149
}
150+
151+
@if $enable-dark-mode {
152+
@include color-mode(dark) {
153+
.accordion-button::after {
154+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156+
}
157+
}
158+
}

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//
22
// Base styles
33
//
4-
@use 'sass:math';
4+
55
.alert {
66
// scss-docs-start alert-css-vars
77
--#{$prefix}alert-bg: transparent;
@@ -12,6 +12,7 @@
1212
--#{$prefix}alert-border-color: transparent;
1313
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
1414
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
--#{$prefix}alert-link-color: inherit;
1516
// scss-docs-end alert-css-vars
1617

1718
position: relative;
@@ -32,6 +33,7 @@
3233
// Provide class for links that match alerts
3334
.alert-link {
3435
font-weight: $alert-link-font-weight;
36+
color: var(--#{$prefix}alert-link-color);
3537
}
3638

3739

@@ -54,18 +56,13 @@
5456

5557

5658
// scss-docs-start alert-modifiers
57-
// Generate contextual modifier classes for colorizing the alert.
58-
59-
@each $state, $value in $theme-colors {
60-
$alert-background: shift-color($value, $alert-bg-scale);
61-
$alert-border: shift-color($value, $alert-border-scale);
62-
$alert-color: shift-color($value, $alert-color-scale);
63-
64-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65-
$alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
66-
}
59+
// Generate contextual modifier classes for colorizing the alert
60+
@each $state in map-keys($theme-colors) {
6761
.alert-#{$state} {
68-
@include alert-variant($alert-background, $alert-border, $alert-color);
62+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
6966
}
7067
}
7168
// scss-docs-end alert-modifiers

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_button-group.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
// Prevent double borders when buttons are next to each other
4040
> :not(.btn-check:first-child) + .btn,
4141
> .btn-group:not(:first-child) {
42-
margin-left: -$btn-border-width;
42+
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
4343
}
4444

4545
// Reset rounded corners
@@ -126,7 +126,7 @@
126126

127127
> .btn:not(:first-child),
128128
> .btn-group:not(:first-child) {
129-
margin-top: -$btn-border-width;
129+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130130
}
131131

132132
// Reset rounded corners

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_buttons.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
1111
--#{$prefix}btn-font-weight: #{$btn-font-weight};
1212
--#{$prefix}btn-line-height: #{$btn-line-height};
13-
--#{$prefix}btn-color: #{$body-color};
13+
--#{$prefix}btn-color: #{$btn-color};
1414
--#{$prefix}btn-bg: transparent;
1515
--#{$prefix}btn-border-width: #{$btn-border-width};
1616
--#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
169169
--#{$prefix}btn-active-border-color: transparent;
170170
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
171171
--#{$prefix}btn-disabled-border-color: transparent;
172-
--#{$prefix}btn-box-shadow: none;
173-
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
172+
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
173+
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
174174

175175
text-decoration: $link-decoration;
176176
@if $enable-gradients {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
--#{$prefix}card-spacer-y: #{$card-spacer-y};
88
--#{$prefix}card-spacer-x: #{$card-spacer-x};
99
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10+
--#{$prefix}card-title-color: #{$card-title-color};
11+
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
1012
--#{$prefix}card-border-width: #{$card-border-width};
1113
--#{$prefix}card-border-color: #{$card-border-color};
1214
--#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
2830
flex-direction: column;
2931
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
3032
height: var(--#{$prefix}card-height);
33+
color: var(--#{$prefix}body-color);
3134
word-wrap: break-word;
3235
background-color: var(--#{$prefix}card-bg);
3336
background-clip: border-box;
@@ -73,11 +76,13 @@
7376

7477
.card-title {
7578
margin-bottom: var(--#{$prefix}card-title-spacer-y);
79+
color: var(--#{$prefix}card-title-color);
7680
}
7781

7882
.card-subtitle {
7983
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
8084
margin-bottom: 0;
85+
color: var(--#{$prefix}card-subtitle-color);
8186
}
8287

8388
.card-text:last-child {

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,6 @@
165165
margin-right: $carousel-control-width;
166166
margin-bottom: 1rem;
167167
margin-left: $carousel-control-width;
168-
list-style: none;
169168

170169
[data-bs-target] {
171170
box-sizing: content-box;
@@ -210,7 +209,7 @@
210209

211210
// Dark mode carousel
212211

213-
.carousel-dark {
212+
@mixin carousel-dark() {
214213
.carousel-control-prev-icon,
215214
.carousel-control-next-icon {
216215
filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
224223
color: $carousel-dark-caption-color;
225224
}
226225
}
226+
227+
.carousel-dark {
228+
@include carousel-dark();
229+
}
230+
231+
@if $enable-dark-mode {
232+
@include color-mode(dark) {
233+
@if $color-mode-type == "media-query" {
234+
.carousel {
235+
@include carousel-dark();
236+
}
237+
} @else {
238+
.carousel,
239+
&.carousel {
240+
@include carousel-dark();
241+
}
242+
}
243+
}
244+
}

0 commit comments

Comments
 (0)