v7.1.0

CHANGELOG.md

@@ -1,3 +1,26 @@
+# 7.1.0
+
+In this release the Design System documentation fully implements Bootstrap 5 classes, refer to all code snippets for changes. **Future versions of the Design System will remove Bootstrap 4 classes that were included to ease migration.** Be sure to replace all Bootstrap 4 classes in your application, refer to the migration guide on the Design System website and the Bootstrap 5.2 [migration guide](https://getbootstrap.com/docs/5.2/migration/#sass). A few examples of Bootstrap 5.2 changes are:
+
+- Margin and padding utility classes use start and end instead of left and right. Use `ms-`, `me-`, `ps-`, `pe-` insted of `ml-`, `mr-`, `pl-`, `pr-`
+- Replace all `form-group` classes with `mb-3`. The `form-group` class is removed.
+- All labels require the `form-label` class.
+- All selects require the `form-select` class
+- Replace `no-gutter` with `g-0`.
+- Table class `.thead-light` is replaced with `.table-light`.
+- Media query mixins have changed and use the breakpoint itself instead of the next breakpoint. Refer to the breaking change on the Bootstrap 5 migration guide.
+
+## BREAKING CHANGES
+
+- If using an ng-bootstrap as a select in a form, the dropdown requires adding the `form-select` class for proper styling. See the dropdowns page for an example.
+- Updated to `ngx-slider-v2`, the original plugin does not have full Angular 15 support yet. See [this issue](https://github.com/angular-slider/ngx-slider/issues/355#issuecomment-1601732500) for details. Future versions will change back to the original `ngx-slider`.
+
+## Documentation
+
+- All third-party plugins links go to the base url instead of particular versions and components. Be sure to select the correct version and component in the plugin documentation.
+
+---
+
 # 7.0.9
 
 ## Changes/Fixes
@@ -119,13 +142,13 @@ Your node version must be at least 14.20.0, please check by running `node -v`.
   - `text-right` is now `text-end`
   - these can still be set by viewport size (e.g., `xs`, `md`)
 - Due to the above new text classes, our Footer HTML has changes
-- Font weight and italic classes such as `font-weight-*` have been changed to `fw-*` and `fst-*`. [See the table](https://getbootstrap.com/docs/5.3/utilities/text/#font-weight-and-italics).
+- Font weight and italic classes such as `font-weight-*` have been changed to `fw-*` and `fst-*`. [See the table](https://getbootstrap.com/docs/5.2/utilities/text/#font-weight-and-italics).
 - Card Deck and Card Columns have been removed
 - Remove `.input-group-append` and `.input-group-prepend` DIVs. You now just add buttons and `.input-group-text` span or divs as direct children of the input groups.
 - NG Bootstrap dropdown items no longer need a class, instead each menu item (button) needs `ngbDropdownItem`. See input fields > with dropdown for an example.
 - There were extensive css class name changes to Angular Material 15 components. The changes were integrated into the Design System css, so no work should be required unless you made your own overrides to the Design System.
 
-### For more information about the changes in Bootstrap 5, [please see their migration guide](https://getbootstrap.com/docs/5.1/migration/).
+### For more information about the changes in Bootstrap 5, [please see their migration guide](https://getbootstrap.com/docs/5.2/migration/).
 
 ---
 

a11y-widget/a11y-widget.component.d.ts

@@ -1,28 +1,28 @@
-import { AfterContentInit, OnInit, Renderer2 } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import * as i0 from "@angular/core";
-export declare class PbdsA11yWidgetComponent implements OnInit, AfterContentInit {
-    private modalService;
-    private fb;
-    private document;
-    private renderer;
-    constructor(modalService: NgbModal, fb: UntypedFormBuilder, document: Document, renderer: Renderer2);
-    form: import("@angular/forms").UntypedFormGroup;
-    fontBrandRegular: string;
-    fontBrandBold: string;
-    fontBrandLight: string;
-    fontSans: string;
-    ngOnInit(): void;
-    ngAfterContentInit(): void;
-    resetFonts(): void;
-    reduceSaturation(): void;
-    increaseSaturation(): void;
-    toggleVisionOptions(event: MatSlideToggleChange): void;
-    toggleCognitiveOptions(event: MatSlideToggleChange): void;
-    toggleLimitDistrations(event: MatSlideToggleChange): void;
-    openA11yWidget(event: MouseEvent, a11yWidget: NgbModal): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsA11yWidgetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsA11yWidgetComponent, "pbds-a11y-widget", never, {}, {}, never, never, false, never>;
-}
+import { AfterContentInit, OnInit, Renderer2 } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import * as i0 from "@angular/core";
+export declare class PbdsA11yWidgetComponent implements OnInit, AfterContentInit {
+    private modalService;
+    private fb;
+    private document;
+    private renderer;
+    constructor(modalService: NgbModal, fb: UntypedFormBuilder, document: Document, renderer: Renderer2);
+    form: import("@angular/forms").UntypedFormGroup;
+    fontBrandRegular: string;
+    fontBrandBold: string;
+    fontBrandLight: string;
+    fontSans: string;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    resetFonts(): void;
+    reduceSaturation(): void;
+    increaseSaturation(): void;
+    toggleVisionOptions(event: MatSlideToggleChange): void;
+    toggleCognitiveOptions(event: MatSlideToggleChange): void;
+    toggleLimitDistrations(event: MatSlideToggleChange): void;
+    openA11yWidget(event: MouseEvent, a11yWidget: NgbModal): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsA11yWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsA11yWidgetComponent, "pbds-a11y-widget", never, {}, {}, never, never, false, never>;
+}

a11y-widget/a11y-widget.module.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./a11y-widget.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/material/slide-toggle";
-import * as i4 from "@angular/forms";
-export declare class PbdsA11yWidgetModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsA11yWidgetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsA11yWidgetModule, [typeof i1.PbdsA11yWidgetComponent], [typeof i2.CommonModule, typeof i3.MatSlideToggleModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule], [typeof i1.PbdsA11yWidgetComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsA11yWidgetModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./a11y-widget.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/slide-toggle";
+import * as i4 from "@angular/forms";
+export declare class PbdsA11yWidgetModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsA11yWidgetModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsA11yWidgetModule, [typeof i1.PbdsA11yWidgetComponent], [typeof i2.CommonModule, typeof i3.MatSlideToggleModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule], [typeof i1.PbdsA11yWidgetComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsA11yWidgetModule>;
+}

a11y-widget/index.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="pb-design-system/a11y-widget" />
-export * from './public_api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pb-design-system/a11y-widget" />
+export * from './public_api';

a11y-widget/public_api.d.ts

@@ -1,2 +1,2 @@
-export * from './a11y-widget.component';
-export * from './a11y-widget.module';
+export * from './a11y-widget.component';
+export * from './a11y-widget.module';

avatar/avatar.component.d.ts

@@ -1,22 +1,22 @@
-import * as i0 from "@angular/core";
-export declare class PbdsAvatarComponent {
-    label: string;
-    icon: string;
-    image: string;
-    size: string;
-    shape: string;
-    style: any;
-    styleClass: string;
-    value: string;
-    title: string;
-    containerClass(): {
-        'pb-avatar': boolean;
-        'pb-avatar-image': boolean;
-        'pb-avatar-circle': boolean;
-        'pb-avatar-sm': boolean;
-        'pb-avatar-lg': boolean;
-        'pb-avatar-xl': boolean;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsAvatarComponent, "pbds-avatar", never, { "label": "label"; "icon": "icon"; "image": "image"; "size": "size"; "shape": "shape"; "style": "style"; "styleClass": "styleClass"; "value": "value"; "title": "title"; }, {}, never, never, false, never>;
-}
+import * as i0 from "@angular/core";
+export declare class PbdsAvatarComponent {
+    label: string;
+    icon: string;
+    image: string;
+    size: string;
+    shape: string;
+    style: any;
+    styleClass: string;
+    value: string;
+    title: string;
+    containerClass(): {
+        'pb-avatar': boolean;
+        'pb-avatar-image': boolean;
+        'pb-avatar-circle': boolean;
+        'pb-avatar-sm': boolean;
+        'pb-avatar-lg': boolean;
+        'pb-avatar-xl': boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsAvatarComponent, "pbds-avatar", never, { "label": "label"; "icon": "icon"; "image": "image"; "size": "size"; "shape": "shape"; "style": "style"; "styleClass": "styleClass"; "value": "value"; "title": "title"; }, {}, never, never, false, never>;
+}

avatar/avatar.module.d.ts

@@ -1,8 +1,8 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./avatar.component";
-import * as i2 from "@angular/common";
-export declare class PbdsAvatarModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsAvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsAvatarModule, [typeof i1.PbdsAvatarComponent], [typeof i2.CommonModule], [typeof i1.PbdsAvatarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsAvatarModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./avatar.component";
+import * as i2 from "@angular/common";
+export declare class PbdsAvatarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsAvatarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsAvatarModule, [typeof i1.PbdsAvatarComponent], [typeof i2.CommonModule], [typeof i1.PbdsAvatarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsAvatarModule>;
+}

avatar/index.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="pb-design-system/avatar" />
-export * from './public_api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pb-design-system/avatar" />
+export * from './public_api';

avatar/public_api.d.ts

@@ -1,2 +1,2 @@
-export * from './avatar.component';
-export * from './avatar.module';
+export * from './avatar.component';
+export * from './avatar.module';

column-toggle/column-toggle.component.d.ts

@@ -1,24 +1,24 @@
-import { EventEmitter } from '@angular/core';
-import { PbdsColumnToggle } from './column-toggle.interfaces';
-import * as i0 from "@angular/core";
-export declare class PbdsColumnToggleComponent {
-    label: string;
-    showAllLabel: string;
-    columns: any[];
-    storagekey: string | false;
-    minimum: number;
-    placement: string;
-    toggle: EventEmitter<PbdsColumnToggle>;
-    isShowAll: boolean;
-    columnStorage: any;
-    index: number;
-    private totalSelected;
-    ngOnInit(): void;
-    toggleColumn($event: any, column: any): void;
-    showAllColumns($event: Event): void;
-    private setLocalStorage;
-    private updateTotalSelected;
-    setShowAllChecked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsColumnToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsColumnToggleComponent, "pbds-column-toggle", never, { "label": "label"; "showAllLabel": "showAllLabel"; "columns": "columns"; "storagekey": "storagekey"; "minimum": "minimum"; "placement": "placement"; }, { "toggle": "toggle"; }, never, never, false, never>;
-}
+import { EventEmitter } from '@angular/core';
+import { PbdsColumnToggle } from './column-toggle.interfaces';
+import * as i0 from "@angular/core";
+export declare class PbdsColumnToggleComponent {
+    label: string;
+    showAllLabel: string;
+    columns: any[];
+    storagekey: string | false;
+    minimum: number;
+    placement: string;
+    toggle: EventEmitter<PbdsColumnToggle>;
+    isShowAll: boolean;
+    columnStorage: any;
+    index: number;
+    private totalSelected;
+    ngOnInit(): void;
+    toggleColumn($event: any, column: any): void;
+    showAllColumns($event: Event): void;
+    private setLocalStorage;
+    private updateTotalSelected;
+    setShowAllChecked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsColumnToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PbdsColumnToggleComponent, "pbds-column-toggle", never, { "label": "label"; "showAllLabel": "showAllLabel"; "columns": "columns"; "storagekey": "storagekey"; "minimum": "minimum"; "placement": "placement"; }, { "toggle": "toggle"; }, never, never, false, never>;
+}

column-toggle/column-toggle.interfaces.d.ts

@@ -1,5 +1,5 @@
-export interface PbdsColumnToggle {
-    showAll: boolean;
-    column: Object | null;
-    columns: any[];
-}
+export interface PbdsColumnToggle {
+    showAll: boolean;
+    column: Object | null;
+    columns: any[];
+}

column-toggle/column-toggle.module.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./column-toggle.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@ng-bootstrap/ng-bootstrap";
-import * as i4 from "@angular/forms";
-export declare class PbdsColumnToggleModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsColumnToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsColumnToggleModule, [typeof i1.PbdsColumnToggleComponent], [typeof i2.CommonModule, typeof i3.NgbDropdownModule, typeof i4.FormsModule], [typeof i1.PbdsColumnToggleComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsColumnToggleModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./column-toggle.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@ng-bootstrap/ng-bootstrap";
+import * as i4 from "@angular/forms";
+export declare class PbdsColumnToggleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsColumnToggleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PbdsColumnToggleModule, [typeof i1.PbdsColumnToggleComponent], [typeof i2.CommonModule, typeof i3.NgbDropdownModule, typeof i4.FormsModule], [typeof i1.PbdsColumnToggleComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PbdsColumnToggleModule>;
+}

column-toggle/index.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="pb-design-system/column-toggle" />
-export * from './public_api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pb-design-system/column-toggle" />
+export * from './public_api';

column-toggle/public_api.d.ts

@@ -1,3 +1,3 @@
-export * from './column-toggle.module';
-export * from './column-toggle.interfaces';
-export * from './column-toggle.component';
+export * from './column-toggle.module';
+export * from './column-toggle.interfaces';
+export * from './column-toggle.component';

dataviz/dataviz-bar-annotations.directive.d.ts

@@ -1,17 +1,17 @@
-import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class PbdsBarAnnotationsDirective implements OnInit, OnChanges {
-    private component;
-    annotations: any;
-    annotationsHilight: any;
-    annotationClicked: EventEmitter<any>;
-    private annotationsGroup;
-    private hilightBox;
-    constructor(component: any);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    private update;
-    private updateHilight;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsBarAnnotationsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PbdsBarAnnotationsDirective, "pbds-dataviz-bar[annotations]", never, { "annotations": "annotations"; "annotationsHilight": "annotationsHilight"; }, { "annotationClicked": "annotationClicked"; }, never, never, false, never>;
-}
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PbdsBarAnnotationsDirective implements OnInit, OnChanges {
+    private component;
+    annotations: any;
+    annotationsHilight: any;
+    annotationClicked: EventEmitter<any>;
+    private annotationsGroup;
+    private hilightBox;
+    constructor(component: any);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private update;
+    private updateHilight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsBarAnnotationsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PbdsBarAnnotationsDirective, "pbds-dataviz-bar[annotations]", never, { "annotations": "annotations"; "annotationsHilight": "annotationsHilight"; }, { "annotationClicked": "annotationClicked"; }, never, never, false, never>;
+}

dataviz/dataviz-bar-grouped-annotations.directive.d.ts

@@ -1,17 +1,17 @@
-import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class PbdsBarGroupedAnnotationsDirective implements OnInit, OnChanges {
-    private component;
-    annotations: any;
-    annotationsHilight: any;
-    annotationClicked: EventEmitter<any>;
-    private annotationsGroup;
-    private hilightBox;
-    constructor(component: any);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    private update;
-    private updateHilight;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsBarGroupedAnnotationsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PbdsBarGroupedAnnotationsDirective, "pbds-dataviz-bar-grouped[annotations]", never, { "annotations": "annotations"; "annotationsHilight": "annotationsHilight"; }, { "annotationClicked": "annotationClicked"; }, never, never, false, never>;
-}
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PbdsBarGroupedAnnotationsDirective implements OnInit, OnChanges {
+    private component;
+    annotations: any;
+    annotationsHilight: any;
+    annotationClicked: EventEmitter<any>;
+    private annotationsGroup;
+    private hilightBox;
+    constructor(component: any);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private update;
+    private updateHilight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PbdsBarGroupedAnnotationsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PbdsBarGroupedAnnotationsDirective, "pbds-dataviz-bar-grouped[annotations]", never, { "annotations": "annotations"; "annotationsHilight": "annotationsHilight"; }, { "annotationClicked": "annotationClicked"; }, never, never, false, never>;
+}