{{ label }}
{{ value }}%
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.scss
index 95330b02a..9bf172c9b 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.scss
@@ -1,13 +1,16 @@
:host {
display: inline-block;
+
&.large {
height: 140px;
width: 140px;
}
+
&.small {
height: 30px;
width: 30px;
}
+
&.overlay {
height: 100vh;
width: 100vw;
@@ -19,6 +22,7 @@
align-items: center;
z-index: 1000;
}
+
.spinnerContainer {
.backOverlay {
width: 100vw;
@@ -29,13 +33,16 @@
top: 0;
left: 0;
}
+
height: inherit;
width: inherit;
position: relative;
+
&.overlayed {
width: 140px;
height: 140px;
}
+
&.notOverlayed {
height: auto;
width: auto;
@@ -44,26 +51,32 @@
left: 0;
z-index: 1;
}
+
display: flex;
align-items: center;
justify-content: center;
+
.mat-spinner,
- .mat-progress-spinner {
+ .mat-mdc-progress-spinner {
::ng-deep {
width: inherit !important;
height: inherit !important;
+
svg {
- width: inherit !important;
- height: inherit !important;
+ width: auto !important;
+ height: 100% !important;
}
+
circle {
stroke-width: 6px !important;
}
}
}
+
&.smaller {
+
.mat-spinner,
- .mat-progress-spinner {
+ .mat-mdc-progress-spinner {
::ng-deep {
circle {
stroke-width: 16px !important;
@@ -71,6 +84,7 @@
}
}
}
+
.labelsContainer {
position: absolute;
margin: 0 auto;
@@ -78,8 +92,10 @@
width: 110px;
font-family: var(--fontFamily);
font-size: 12px;
+
p {
margin: 0;
+
&.label,
&.value {
width: 100%;
@@ -92,36 +108,44 @@
}
}
}
+
.mat-spinner,
- .mat-progress-spinner {
+ .mat-mdc-progress-spinner {
::ng-deep {
position: absolute;
}
}
+
.spinnerContainer {
.backOverlay {
background-color: var(--spinner-overlayColor);
opacity: 0.8;
}
+
.labelsContainer {
color: #FFFFFF;
+
&.notOverlayed {
color: var(--spinner-fontColor);
}
}
}
- .mat-progress-spinner.backCircle {
+
+ .mat-mdc-progress-spinner.backCircle {
::ng-deep {
circle {
stroke: var(--spinner-totalCircleColor);
}
}
}
+
.mat-spinner.spinner,
- .mat-progress-spinner.spinner {
+ .mat-mdc-progress-spinner {
::ng-deep {
- circle {
- stroke: var(--spinner-trackCircleColor);
+ .mdc-circular-progress__indeterminate-circle-graphic {
+ circle {
+ stroke: var(--spinner-trackCircleColor);
+ }
}
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
index afb098fa9..75748d0db 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
@@ -4,12 +4,14 @@ import {
Input,
HostBinding,
SimpleChanges,
+ Injector
} from "@angular/core";
-import { css } from "emotion";
-import { BehaviorSubject } from "rxjs";
+import { css } from "@emotion/css";
+import { BehaviorSubject, Subscription } from "rxjs";
import { CssUtils } from "../utils";
import { coerceBooleanProperty } from '@angular/cdk/coercion';
-
+import { LoaderService } from './services/loader.service';
+import { LoaderState } from './dxc-spinner.interface';
@Component({
selector: "dxc-spinner",
templateUrl: "./dxc-spinner.component.html",
@@ -20,6 +22,7 @@ export class DxcSpinnerComponent {
type: string = "indeterminate";
@Input() value: number;
@Input() label: string;
+ @Input() alwaysShow = true;
@Input()
get showValue(): boolean {
return this._showValue;
@@ -37,12 +40,19 @@ export class DxcSpinnerComponent {
@HostBinding("class.small") isSmall: boolean = false;
@HostBinding("class.large") isLarge: boolean = true;
+ private loaderService;
+
defaultInputs = new BehaviorSubject({
showValue: false,
mode: "large"
});
- constructor(private utils: CssUtils) {}
+ private subscriptions: Subscription;
+ show = false;
+
+ constructor(private utils: CssUtils, private injector: Injector,) {
+ this.loaderService = this.injector.get(LoaderService);
+ }
public ngOnChanges(changes: SimpleChanges): void {
if (this.value || this.value === 0) {
@@ -89,6 +99,10 @@ export class DxcSpinnerComponent {
if (this.value) {
this.type = "determinate";
}
+ this.subscriptions = this.loaderService.loaderState
+ .subscribe((state: LoaderState) => {
+ this.show = state.show;
+ });
}
getDynamicStyle(inputs) {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.interface.ts b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.interface.ts
new file mode 100644
index 000000000..da257c9a2
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.interface.ts
@@ -0,0 +1,3 @@
+export interface LoaderState {
+ show: boolean;
+}
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/services/loader.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/services/loader.service.ts
new file mode 100644
index 000000000..69c247192
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/services/loader.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+interface LoaderState {
+ show: boolean;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LoaderService {
+ private loaderSubject = new Subject(); loaderState = this.loaderSubject.asObservable();
+ constructor() { }
+ show() {
+ this.loaderSubject.next({ show: true });
+ }
+ hide() {
+ this.loaderSubject.next({ show: false });
+ }
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.html
index 754fc810a..203b856e7 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-switch/dxc-switch.component.html
@@ -7,6 +7,10 @@
[id]="id"
(change)="onChangeHandler($event)"
[tabIndex]="disabled ? -1 : tabIndexValue"
+ [matTooltip]="ariaLabel || label"
+ [aria-label]="ariaLabel || label"
+ [aria-labelledby]="ariaLabelledBy"
+ [attr.aria-describedby]="ariaDescribedBy"
>
-
+
- {{ label }}
+ {{ label }}
+
-
\ No newline at end of file
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tab/dxc-tab.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tab/dxc-tab.component.ts
index bc252a228..37609baa5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tab/dxc-tab.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tab/dxc-tab.component.ts
@@ -17,13 +17,44 @@ import { TabService } from "../services/tab.service";
templateUrl: "./dxc-tab.component.html",
})
export class DxcTabComponent implements OnChanges {
- //Default values
+ /**
+ * Text to be placed within the tab.
+ */
@Input() label: string;
+
+ /**
+ * @deprecated The path of an icon to be placed within the tab.
+ */
@Input() iconSrc: string;
+
+ /**
+ * Whether the tab is disabled or not.
+ */
@Input() disabled: boolean = false;
+
+ /**
+ * It can have boolean type or number type.
+ * If the value is 'true', an empty badge will appear. If it is 'false',
+ * no badge will appear.
+ * If a number is put it will be shown as the label of the notification
+ * in the tab, taking into account that if that number is greater than 99,
+ * it will appear as '+99' in the badge.
+ */
+ @Input() notificationNumber: boolean | number;
+
+ /**
+ * This event will emit when the user clicks on a tab. The index
+ * of the clicked tab will be passed as a parameter.
+ */
+ @Output() onTabClick: EventEmitter
= new EventEmitter();
+
+ /**
+ * This event will emit when the user is on hover on a tab.
+ */
+ @Output() onTabHover: EventEmitter = new EventEmitter();
+
@Input() id: number;
- @Output() onTabClick = new EventEmitter();
- @Output() onTabHover = new EventEmitter();
+ @Input() name: string;
showDotIndicator: boolean = false;
labelClass: string;
@@ -37,6 +68,8 @@ export class DxcTabComponent implements OnChanges {
iconPosition: string;
+ notificationValue: any;
+
constructor(private cdRef: ChangeDetectorRef, private service: TabService) {
this.service.iconPosition.subscribe((value) => {
if (value) {
@@ -46,6 +79,13 @@ export class DxcTabComponent implements OnChanges {
});
}
+ public ngOnInit(): void {
+ this.notificationValue =
+ typeof this.notificationNumber === "boolean"
+ ? ""
+ : this.notificationNumber;
+ }
+
public ngOnChanges(): void {
this.getLabelClass();
if (this.matTab) {
@@ -60,12 +100,16 @@ export class DxcTabComponent implements OnChanges {
this.tabIcon = true;
}
this.getLabelClass();
- this.cdRef.detectChanges();
this.matTab.disabled = this.disabled;
+ this.cdRef.detectChanges();
}
public onClickHandler(): void {
- this.onTabClick.emit(this.id);
+ if (!this.matTab.disabled) {
+ this.onTabClick.emit(this.id);
+ } else {
+ this.matTab.isActive = false;
+ }
}
public onHoverHandler(): void {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
index 86f87529e..2b18beb82 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.scss
@@ -2,11 +2,11 @@
.filled-tabs {
::ng-deep {
.mat-ink-bar {
- background-color: var(--tabs-selectedUnderlinedColor);
+ background-color: var(--tabs-selectedUnderlineColor);
}
}
}
- ::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label:hover:not(.mat-tab-disabled) {
+ ::ng-deep .mat-mdc-tab-list .mat-mdc-tab-labels .mat-tab-label:hover:not(.mat-tab-disabled) {
background-color: var(--tabs-hoverBackgroundColor);
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts
index ea6623756..135e01dfc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.spec.ts
@@ -1,71 +1,146 @@
import { render, fireEvent } from "@testing-library/angular";
import { screen } from "@testing-library/dom";
-import { DxcTabsComponent } from "./dxc-tabs.component";
-import { DxcTabsModule } from './dxc-tabs.module';
+import { DxcTabsModule } from "./dxc-tabs.module";
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+import { TestBed } from "@angular/core/testing";
+
+TestBed.initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
describe("DxcTabs tests", () => {
test("should render dxc-tabs", async () => {
- const tabs = await render(DxcTabsComponent, {
- template: `
-
-
-
- `,
- componentProperties: { },
- imports: [DxcTabsModule],
- excludeComponentDeclaration: true
- });
+ const tabs = await render(
+ `
+
+
+
+ `,
+ {
+ componentProperties: {},
+ imports: [DxcTabsModule],
+ excludeComponentDeclaration: true,
+ }
+ );
tabs.detectChanges();
expect(tabs.getByText("Tab1")).toBeTruthy();
expect(tabs.getByText("Tab2")).toBeTruthy();
expect(tabs.getByText("Tab3")).toBeTruthy();
- });
+ });
+
+ test("should render dxc-tabs with default value", async () => {
+ const clickFunction = jest.fn();
+ const tabs = await render(
+ `
+
+
+
+ `,
+ {
+ componentProperties: { clickFunction },
+ imports: [DxcTabsModule],
+ excludeComponentDeclaration: true,
+ }
+ );
+ tabs.detectChanges();
+ const arrTabs = screen.getAllByRole("tab");
+ expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[2].getAttribute("aria-selected")).toBe("true");
+ expect(tabs.getByText("Tab1")).toBeTruthy();
+ expect(tabs.getByText("Tab2")).toBeTruthy();
+ expect(tabs.getByText("Tab3")).toBeTruthy();
+
+ const tab1 = screen.getByText("Tab1");
+ fireEvent.click(tab1);
+ tabs.detectChanges();
+ expect(clickFunction).toHaveBeenCalledWith(0);
+ expect(arrTabs[0].getAttribute("aria-selected")).toBe("true");
+ expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
+ });
- test("should render uncontrolled tabs", async () => {
- const clickFunction = jest.fn();
- const tabs = await render(DxcTabsComponent, {
- template: `
-
-
-
- `,
+ test("should render dxc-badge", async () => {
+ const tabs = await render(
+ `
+
+
+
+ `,
+ {
+ componentProperties: {},
+ imports: [DxcTabsModule],
+ excludeComponentDeclaration: true,
+ }
+ );
+ tabs.detectChanges();
+ expect(tabs.getByText("90")).toBeTruthy();
+ expect(tabs.getByText("+99")).toBeTruthy();
+ });
+
+ test("should render uncontrolled tabs", async () => {
+ const clickFunction = jest.fn();
+ const tabs = await render(
+ `
+
+
+
+ `,
+ {
componentProperties: { clickFunction },
imports: [DxcTabsModule],
- excludeComponentDeclaration: true
- });
- tabs.detectChanges();
- const tab1 = screen.getByText("Tab1");
- const tab2 = screen.getByText("Tab2");
- fireEvent.click(tab2);
- tabs.detectChanges();
- expect(clickFunction).toHaveBeenCalledWith(1);
- tabs.detectChanges();
- fireEvent.click(tab1);
- tabs.detectChanges();
- expect(clickFunction).toHaveBeenCalledWith(0);
- });
+ excludeComponentDeclaration: true,
+ }
+ );
+ tabs.detectChanges();
+ const tab1 = screen.getByText("Tab1");
+ const tab2 = screen.getByText("Tab2");
+ fireEvent.click(tab2);
+ tabs.detectChanges();
+ expect(clickFunction).toHaveBeenCalledWith(1);
+ tabs.detectChanges();
+ fireEvent.click(tab1);
+ tabs.detectChanges();
+ expect(clickFunction).toHaveBeenCalledWith(0);
+ });
- test("should render controlled tabs", async () => {
- const clickFunction = jest.fn();
- const tabs = await render(DxcTabsComponent, {
- template: `
-
-
-
- `,
+ test("should render controlled tabs", async () => {
+ const clickFunction = jest.fn();
+ const tabs = await render(
+ `
+
+
+
+ `,
+ {
componentProperties: { clickFunction },
imports: [DxcTabsModule],
- excludeComponentDeclaration: true
- });
- tabs.detectChanges();
- const tab2 = screen.getByText("Tab2");
- const tab3 = screen.getByText("Tab3");
- fireEvent.click(tab2);
- tabs.detectChanges();
- expect(clickFunction).toHaveBeenCalledWith(1);
- tabs.detectChanges();
- fireEvent.click(tab3);
- tabs.detectChanges();
- expect(clickFunction).toHaveBeenCalledWith(2);
- });
-});
\ No newline at end of file
+ excludeComponentDeclaration: true,
+ }
+ );
+ tabs.detectChanges();
+ const arrTabs = screen.getAllByRole("tab");
+ expect(arrTabs[0].getAttribute("aria-selected")).toBe("true");
+ expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
+ const tab2 = screen.getByText("Tab2");
+ const tab3 = screen.getByText("Tab3");
+ fireEvent.click(tab2);
+ tabs.detectChanges();
+ expect(clickFunction).toHaveBeenCalledWith(1);
+ expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[1].getAttribute("aria-selected")).toBe("true");
+ expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
+ tabs.detectChanges();
+ fireEvent.click(tab3);
+ tabs.detectChanges();
+ expect(clickFunction).toHaveBeenCalledWith(2);
+ expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+ expect(arrTabs[2].getAttribute("aria-selected")).toBe("true");
+ });
+});
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts
index a563ae318..d22a18575 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.component.ts
@@ -10,7 +10,7 @@ import {
} from "@angular/core";
import { DxcTabComponent } from "./dxc-tab/dxc-tab.component";
import { MatTab, MatTabGroup } from "@angular/material/tabs";
-import { css } from "emotion";
+import { css } from "@emotion/css";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
import { coerceNumberProperty } from "@angular/cdk/coercion";
@@ -21,6 +21,7 @@ import {
MAT_RIPPLE_GLOBAL_OPTIONS,
RippleGlobalOptions,
} from "@angular/material/core";
+import { TabsProperties, Spacing, Space } from "./dxc-tabs.types";
const globalRippleConfig: RippleGlobalOptions = {
animation: {
@@ -28,6 +29,7 @@ const globalRippleConfig: RippleGlobalOptions = {
exitDuration: 0,
},
};
+
@Component({
selector: "dxc-tabs",
templateUrl: "./dxc-tabs.component.html",
@@ -39,13 +41,9 @@ const globalRippleConfig: RippleGlobalOptions = {
],
})
export class DxcTabsComponent implements OnChanges {
- @HostBinding("class") className;
- @HostBinding("class.label-icons") allTabWithLabelAndIcon: boolean = false;
-
- //Default values
- @Input() margin: any;
- @Input() iconPosition: string;
-
+ /**
+ * The index of the active tab.
+ */
@Input()
get activeTabIndex(): number {
return this._activeTabIndex;
@@ -53,7 +51,36 @@ export class DxcTabsComponent implements OnChanges {
set activeTabIndex(value: number) {
this._activeTabIndex = coerceNumberProperty(value);
}
- private _activeTabIndex;
+ private _activeTabIndex = 0;
+
+ /**
+ * Initially active tab, only when it is uncontrolled
+ */
+ @Input()
+ get defaultActiveTabIndex(): number {
+ return this._defaultActiveTabIndex;
+ }
+ set defaultActiveTabIndex(value: number) {
+ this._defaultActiveTabIndex = coerceNumberProperty(value);
+ }
+ private _defaultActiveTabIndex = 0;
+
+ /**
+ * Position of icons in tabs.
+ */
+ @Input() iconPosition: "top" | "left" = "left";
+
+ /**
+ * Size of the margin to be applied to the component
+ * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+ * in order to specify different margin sizes.
+ */
+ @Input() margin: Space | Spacing;
+
+ @HostBinding("class") className;
+ @HostBinding("class.label-icons") allTabWithLabelAndIcon: boolean = false;
+
renderedActiveTabIndex: number;
@ViewChild(MatRipple) ripple: MatRipple;
@@ -64,9 +91,10 @@ export class DxcTabsComponent implements OnChanges {
@ContentChildren(DxcTabComponent)
protected tabs: QueryList;
- defaultInputs = new BehaviorSubject({
+ defaultInputs = new BehaviorSubject({
+ activeTabIndex: 0,
+ iconPosition: "left",
margin: null,
- iconPosition: null,
});
constructor(
@@ -82,7 +110,6 @@ export class DxcTabsComponent implements OnChanges {
if (this.tabs && this.tabs.length > 0) {
this.generateTabs();
}
-
const inputs = Object.keys(changes).reduce((result, item) => {
result[item] = changes[item].currentValue;
return result;
@@ -93,6 +120,9 @@ export class DxcTabsComponent implements OnChanges {
ngOnInit() {
this.service.iconPosition.next(this.iconPosition || "left");
+ this.activeTabIndex = this.defaultActiveTabIndex
+ ? this.defaultActiveTabIndex
+ : this.activeTabIndex;
this.renderedActiveTabIndex = this.activeTabIndex;
this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
}
@@ -114,6 +144,29 @@ export class DxcTabsComponent implements OnChanges {
this.cdRef.detectChanges();
this.setEventListeners();
this.cdRef.detectChanges();
+
+ this.tabs.changes.subscribe((value) => {
+ const matTabsFromQueryList = value.map((tab, index) => {
+ if (tab.label && tab.iconSrc) {
+ this.allTabWithLabelAndIcon = true;
+ }
+ tab.id = index;
+ return tab.matTab;
+ });
+ const list = new QueryList();
+ list.reset([matTabsFromQueryList]);
+ this.tabGroup._tabs = list;
+ this.setActiveTab();
+ this.cdRef.detectChanges();
+ });
+ }
+
+ private hasLabelAndIcon() {
+ return (
+ this.tabs &&
+ this.tabs.filter((tab) => tab.label !== null && tab.iconSrc !== null)
+ .length > 0
+ );
}
private generateTabs() {
@@ -131,7 +184,8 @@ export class DxcTabsComponent implements OnChanges {
}
setEventListeners() {
- let tabLabels = this._element.nativeElement.getElementsByClassName("mat-tab-label");
+ let tabLabels =
+ this._element.nativeElement.getElementsByClassName("mat-mdc-tab");
if (tabLabels?.length > 0) {
this.tabs.map((tab, index) => {
tabLabels[index].addEventListener("click", function () {
@@ -140,14 +194,17 @@ export class DxcTabsComponent implements OnChanges {
tabLabels[index].addEventListener("mouseenter", function () {
tab.onHoverHandler();
});
+ tabLabels[index].addEventListener("keydown", function (e) {
+ if(e.keyCode === 13 || e.keyCode === 32)
+ tab.onClickHandler()
+ });
});
}
}
insertUnderline() {
- let tabList = this._element.nativeElement.getElementsByClassName(
- "mat-tab-list"
- )[0];
+ let tabList =
+ this._element.nativeElement.getElementsByClassName("mat-mdc-tab-list")[0];
tabList.insertAdjacentHTML("beforeend", '');
}
@@ -156,25 +213,37 @@ export class DxcTabsComponent implements OnChanges {
.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
box-shadow: none;
}
- .mat-tab-list .underline {
- height: 1px;
+ .mat-mdc-tab-body.mat-mdc-tab-body-active{
+ height:100%
+ }
+ .mat-mdc-tab-list .mdc-tab-indicator .mdc-tab-indicator__content--underline{
+ border-width: var(--tabs-dividerThickness, 2px);
width: 100%;
- background-color: var(--tabs-divider);
+ border-color: var(--tabs-dividerColor);
+ border-style: solid
}
- .mat-tab-group {
+ .mat-mdc-tab-group{
+ position: relative;
+ display: flex;
+ flex-direction: column;
${this.utils.getMargins(inputs.margin)}
- .mat-tab-header {
+ .mat-mdc-tab-header {
background-color: white;
+ border-bottom: 1px solid var(--mat-tab-header-color)
+ }
+ .mat-ink-bar {
+ background-color: var(--tabs-selectedUnderlineColor);
+ height: var(--tabs-selectedUnderlineThickness);
}
}
- .mat-tab-list .mat-tab-label {
- height: auto !important;
- /* max-width: 360px; */
- padding-right: 16px;
- padding-left: 16px;
+ .mat-mdc-tab-list .mat-mdc-tab-labels {
+ height: ${this.getTabHeight()} !important;
+ min-width: 90px;
+ max-width: fit-content;
+ text-transform: var(--tabs-fontTextTransform) !important;
opacity: 1 !important;
- /* min-width: 90px; */
- background: var(--tabs-backgroundColor) 0% 0% no-repeat;
+ color: var(--tabs-unselectedFontColor);
+ background: var(--tabs-unselectedBackgroundColor) 0% 0% no-repeat;
.dxc-tab-label span:not(.show-dot) {
opacity: 1;
white-space: normal;
@@ -182,18 +251,26 @@ export class DxcTabsComponent implements OnChanges {
.dxc-tab-label span {
color: var(--tabs-fontColor);
opacity: 1;
- font: normal normal 600 16px/22px var(--fontFamily);
- ;
+ font-family: var(--tabs-fontFamily);
+ font-size: var(--tabs-fontSize);
+ font-style: var(--tabs-fontStyle);
+ font-weight: var(--tabs-fontWeight);
}
+ .mat-mdc-tab{
&.cdk-focused {
outline: -webkit-focus-ring-color auto 1px;
outline-color: var(--tabs-focusOutline);
background-color: var(--tabs-hoverBackgroundColor) !important;
+ }
+ &.mdc-tab--active{
+ background-color: var(--tabs-hoverBackgroundColor) !important;
+ }
}
dxc-tab-icon {
fill: var(--tabs-fontColor);
}
.mat-ripple-element {
+ font-weight: var(--tabs-pressedFontWeight) !important;
background-color: var(--tabs-pressedBackgroundColor);
}
.mat-tab-label-content {
@@ -201,6 +278,13 @@ export class DxcTabsComponent implements OnChanges {
display: inline-grid;
text-align: -webkit-center;
z-index: 1;
+
+ dxc-badge {
+ position: absolute;
+ top: 12px;
+ right: 4px;
+ }
+
img,
svg {
width: 22px;
@@ -231,7 +315,6 @@ export class DxcTabsComponent implements OnChanges {
flex-direction: column;
align-items: center;
justify-content: center;
- /* min-width: 90px; */
}
.only-icon {
min-height: 64px;
@@ -240,15 +323,8 @@ export class DxcTabsComponent implements OnChanges {
display: grid;
}
}
- &.mat-tab-disabled {
- .dxc-tab-label span {
- color: var(--tabs-disabledFontColor) !important;
- }
- cursor: not-allowed;
- pointer-events: all !important;
- }
&.mat-tab-label-active {
- /* background-color: var(--tabs-backgroundColor); */
+ background-color: var(--tabs-selectedBackgroundColor);
opacity: 1 !important;
.dxc-tab-label span {
color: var(--tabs-selectedFontColor);
@@ -259,12 +335,34 @@ export class DxcTabsComponent implements OnChanges {
fill: var(--tabs-selectedIconColor);
}
}
+ &.mat-tab-disabled {
+ .dxc-tab-label span {
+ color: var(--tabs-disabledFontColor) !important;
+ font-style: var(--tabs-disabledFontStyle);
+ }
+ dxc-tab-icon {
+ fill: var(--tabs-disabledIconColor);
+ }
+ opacity: 0.5 !important;
+ cursor: not-allowed;
+ pointer-events: all !important;
+ }
}
&.label-icons {
- .mat-tab-list .mat-tab-label {
+ .mat-mdc-tab-list .mat-mdc-tab-labels {
height: 76px;
}
}
`;
}
+
+ getTabHeight() {
+ return (
+ ((!this.hasLabelAndIcon ||
+ (this.hasLabelAndIcon &&
+ this.defaultInputs.value.iconPosition !== "top")) &&
+ "48px") ||
+ "72px"
+ );
+ }
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.module.ts
index 34b44c786..ab65cf4d6 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.module.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.module.ts
@@ -6,18 +6,20 @@ import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { DxcTabsComponent } from "./dxc-tabs.component";
import { DxcTabComponent } from "./dxc-tab/dxc-tab.component";
-import { DxcTabIconComponent } from './dxc-tab/dxc-tab-icon/dxc-tab-icon.component';
+import { DxcTabIconComponent } from "./dxc-tab/dxc-tab-icon/dxc-tab-icon.component";
+import { DxcBadgeComponent } from "../dxc-badge/dxc-badge.component";
+import { DxcBadgeModule } from "../dxc-badge/dxc-badge.module";
@NgModule({
- declarations: [DxcTabsComponent, DxcTabComponent, DxcTabIconComponent],
- imports: [
- CommonModule,
- MatInputModule,
- MatTabsModule,
- MatFormFieldModule,
- FormsModule,
- ],
- exports: [DxcTabsComponent, DxcTabComponent,DxcTabIconComponent],
- entryComponents: [MatTab, MatTabGroup],
+ declarations: [DxcTabsComponent, DxcTabComponent, DxcTabIconComponent],
+ imports: [
+ CommonModule,
+ MatInputModule,
+ MatTabsModule,
+ MatFormFieldModule,
+ DxcBadgeModule,
+ FormsModule,
+ ],
+ exports: [DxcTabsComponent, DxcTabComponent, DxcTabIconComponent]
})
export class DxcTabsModule {}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts
new file mode 100644
index 000000000..6c08ac528
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tabs.types.ts
@@ -0,0 +1,22 @@
+export type Space =
+ | "xxsmall"
+ | "xsmall"
+ | "small"
+ | "medium"
+ | "large"
+ | "xlarge"
+ | "xxlarge";
+
+export type Spacing = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
+export interface TabsProperties {
+ activeTabIndex?: number;
+ iconPosition?: "top" | "left";
+ margin?: Space | Spacing;
+ defaultActiveTabIndex?: number;
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
index b96431f2b..8eb6feda2 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
@@ -11,7 +11,7 @@ import {
} from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
-import { css } from "emotion";
+import { css } from "@emotion/css";
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { ContentChildren, ChangeDetectorRef } from '@angular/core';
import { DxcTagIconComponent } from './dxc-tag-icon/dxc-tag-icon.component';
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.module.ts
index df09d8dd3..2d4593456 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.module.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.module.ts
@@ -7,9 +7,8 @@ import { DxcBoxModule } from "../dxc-box/dxc-box.module";
import { DxcTagIconComponent } from './dxc-tag-icon/dxc-tag-icon.component';
@NgModule({
- declarations: [DxcTagComponent, DxcTagIconComponent],
- imports: [CommonModule, MatIconModule, DxcBoxModule],
- exports: [DxcTagComponent,DxcTagIconComponent],
- entryComponents: [DxcBoxComponent],
+ declarations: [DxcTagComponent, DxcTagIconComponent],
+ imports: [CommonModule, MatIconModule, DxcBoxModule],
+ exports: [DxcTagComponent, DxcTagIconComponent]
})
export class DxcTagModule {}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.html
index a5c9fbbf5..0362469b9 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.html
@@ -1,7 +1,6 @@
{{ label }}
-
+
DxcTextInputComponent),
+ multi: true
+ }],
})
export class DxcTextInputComponent
- implements OnInit, OnChanges, AfterViewChecked {
+ implements OnInit, OnChanges, AfterViewChecked, ControlValueAccessor {
@HostBinding("class") className;
@HostBinding("class.disabled") isDisabled: boolean = false;
@@ -43,6 +49,12 @@ export class DxcTextInputComponent
@Input() public suffix: string;
@Input() public prefixIconSrc: string;
@Input() public suffixIconSrc: string;
+ @Input('ariaLabel') ariaLabel: string = null;
+ @Input('ariaLabelledBy') ariaLabelledBy: string = null;
+ @Input('ariaDescribedBy') ariaDescribedBy: string = null;
+ @Input('ariaRequired') ariaRequired: boolean = false;
+ @Input() public maxLength: number;
+ @Input() public minLength: number;
@Input()
get disabled(): boolean {
return this._disabled;
@@ -81,7 +93,7 @@ export class DxcTextInputComponent
@Input() public value: string;
@Input() public placeholder: string;
@Input() public autocompleteOptions: any;
-
+ @Input() public autocomplete: string = "off";
@Input() public margin: any;
@Input() public size: string;
@Input()
@@ -97,6 +109,7 @@ export class DxcTextInputComponent
@Output() public onClickPrefix: EventEmitter = new EventEmitter();
@Output() public onChange: EventEmitter = new EventEmitter();
@Output() public onBlur: EventEmitter = new EventEmitter();
+ @Output() public onKeyPress: EventEmitter = new EventEmitter();
prefixPointer = false;
suffixPointer = false;
@@ -147,10 +160,34 @@ export class DxcTextInputComponent
tabIndexValue: 0,
});
- constructor(private utils: CssUtils, private ref: ChangeDetectorRef, private service: InputTextService) {}
+ constructor(private utils: CssUtils, private ref: ChangeDetectorRef, private service: InputTextService) { }
+
+ public onTouched: () => void = () => { };
+ public onChangeRegister = (val) => { };
+
+ onInputKeyPress($event): void {
+ this.onKeyPress.emit($event);
+ }
+
+ writeValue(val: any): void {
+ this.renderedValue = val || "";
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChangeRegister = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+
+ setDisabledState(boolv: boolean): void {
+ this.disabled = boolv;
+ }
ngOnInit() {
this.renderedValue = this.value || "";
+ //this.onChangeRegister(this.renderedValue);
this.bindAutocompleteOptions();
this.autocompleteFunction("");
}
@@ -186,7 +223,10 @@ export class DxcTextInputComponent
}
this.isDisabled = this.disabled;
- this.renderedValue = this.value || "";
+ if (changes.value != null) {
+ this.renderedValue = this.value || "";
+ this.onChangeRegister(this.renderedValue);
+ }
this.label = this.label || "";
this.service.setIsDisabled(this.disabled);
@@ -223,6 +263,7 @@ export class DxcTextInputComponent
this.autocompleteFunction($event.target.value);
if (this.value === undefined || this.value === null) {
this.renderedValue = $event.target.value;
+ this.onChangeRegister(this.renderedValue);
} else {
$event.target.value = this.renderedValue;
}
@@ -232,6 +273,7 @@ export class DxcTextInputComponent
this.onChange.emit($event);
if (this.value === undefined || this.value === null) {
this.renderedValue = $event;
+ this.onChangeRegister(this.renderedValue);
} else {
this.singleInput.nativeElement.value = this.renderedValue;
}
@@ -285,6 +327,7 @@ export class DxcTextInputComponent
*Executed when input lost the focus
*/
public onBlurHandle($event: any): void {
+ this.onTouched();
this.onBlur.emit(this.renderedValue);
}
@@ -415,10 +458,10 @@ export class DxcTextInputComponent
}
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: ${this.invalid
- ? "var(--inputText-error) !important"
- : "var(--inputText-focusColor) !important"};
+ ? "var(--inputText-error) !important"
+ : "var(--inputText-focusColor) !important"};
}
- .mat-form-field {
+ .mat-mdc-form-field {
font-family: var(--fontFamily);
line-height: unset;
width: 100%;
@@ -438,9 +481,6 @@ export class DxcTextInputComponent
.mat-hint {
color: var(--inputText-disabledFontColor);
}
- .mat-form-field-underline {
- background-color: var(--inputText-disabledFontColor) !important;
- }
.mat-form-field-empty mat-label {
color: var(--inputText-disabledFontColor);
}
@@ -451,8 +491,8 @@ export class DxcTextInputComponent
color: var(--inputText-disabledFontColor);
}
.mat-form-field-wrapper {
- .mat-form-field-flex {
- .mat-form-field-infix input {
+ .mat-mdc-form-field-flex {
+ .mat-mdc-form-field-infix input {
color: var(--inputText-disabledFontColor);
}
}
@@ -473,15 +513,14 @@ export class DxcTextInputComponent
color: var(--inputText-fontColor);
}
.mat-form-field-underline {
- background-color: var(--inputText-fontColor) !important;
.mat-form-field-ripple {
background-color: var(--inputText-fontColor) !important;
}
}
`}
- .mat-form-field {
+ .mat-mdc-form-field {
&.mat-form-field-should-float {
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
padding-bottom: 7px;
}
mat-label {
@@ -502,14 +541,14 @@ export class DxcTextInputComponent
.mat-form-field-subscript-wrapper {
margin-top: 6px;
}
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
padding-top: 6px;
display: flex;
}
}
- .mat-form-field-flex {
+ .mat-mdc-form-field-flex {
align-items: center;
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
border-top: unset;
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html
index 7d79ad774..7ed47ecc3 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html
@@ -2,7 +2,6 @@
[class.invalid]="invalid"
[class.disabled]="disabled"
[class.required]="required"
- appearance="standard"
>
{{ label }}
{{ assistiveText }}
+
+
\ No newline at end of file
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
index 3086aefd3..8c8f1fbe0 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts
@@ -9,30 +9,41 @@ import {
SimpleChanges,
OnChanges,
AfterViewChecked,
+ forwardRef
} from "@angular/core";
-import { css } from "emotion";
+import { css } from "@emotion/css";
import { BehaviorSubject } from "rxjs";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
import { CssUtils } from "../utils";
-import {
- coerceNumberProperty,
- coerceBooleanProperty,
-} from "@angular/cdk/coercion";
+import { coerceNumberProperty, coerceBooleanProperty } from "@angular/cdk/coercion";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: "dxc-textarea",
templateUrl: "./dxc-textarea.component.html",
- changeDetection: ChangeDetectionStrategy.OnPush,
- providers: [CssUtils],
+ providers: [CssUtils, {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => DxcTextareaComponent),
+ multi: true
+ }],
})
export class DxcTextareaComponent
- implements OnInit, OnChanges, AfterViewChecked {
+ implements OnInit, OnChanges, AfterViewChecked, ControlValueAccessor {
@HostBinding("class") className;
@HostBinding("class.disabled") isDisabled: boolean = false;
@HostBinding("class.invalid") isInvalid: boolean = false;
@HostBinding("class.required") isRequired: boolean = false;
@Input() public value: string;
+ @Input() public autosizeMaxRows = 5;
+ @Input() public autosizeMinRows = 2;
+ @Input() public textareaAutosize = true;
+
+ @Input() public maxLength: number;
+ @Input('ariaLabel') ariaLabel: string = null;
+ @Input('ariaLabelledBy') ariaLabelledBy: string = null;
+ @Input('ariaDescribedBy') ariaDescribedBy: string = null;
+ @Input('ariaRequired') ariaRequired: boolean = false;
@Input() public label: String;
@Input() public assistiveText: string;
@Input() public name: string;
@@ -80,14 +91,14 @@ export class DxcTextareaComponent
this._tabIndexValue = coerceNumberProperty(value);
}
private _tabIndexValue;
-
+ private controlled = true;
@Output() public onChange: EventEmitter = new EventEmitter();
@Output() public onBlur: EventEmitter = new EventEmitter();
renderedValue = "";
private _valueChangeTrack: boolean;
options;
- type: string;
+ type: string = 'textarea';
clicked: boolean = false;
@@ -113,7 +124,7 @@ export class DxcTextareaComponent
tabIndexValue: 0
});
- public formControl = new FormControl();
+ public formControl = new UntypedFormControl();
constructor(private utils: CssUtils) {
this.numRows = 4;
@@ -122,6 +133,7 @@ export class DxcTextareaComponent
ngOnInit() {
this.renderedValue = this.value || "";
this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+ //this.onChangeRegister(this.renderedValue);
}
ngAfterViewChecked(): void {
@@ -130,14 +142,35 @@ export class DxcTextareaComponent
}
}
+ public onTouched: () => void = () => { };
+ public onChangeRegister = (val) => { };
+
+ writeValue(val: any): void {
+ this.renderedValue = val || "";
+ this.controlled = false;
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChangeRegister = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+
+ setDisabledState(boolv: boolean): void {
+ this.disabled = boolv;
+ }
+
public ngOnChanges(changes: SimpleChanges): void {
this.isDisabled = this.disabled;
this.isInvalid = this.invalid;
this.isRequired = this.required;
-
- this.renderedValue = this.value || "";
+ if (this.controlled) {
+ this.renderedValue = this.value || "";
+ this.onChangeRegister(this.renderedValue);
+ }
this.label = this.label || "";
-
const inputs = Object.keys(changes).reduce((result, item) => {
result[item] = changes[item].currentValue;
return result;
@@ -156,6 +189,7 @@ export class DxcTextareaComponent
} else {
$event.target.value = this.renderedValue;
}
+ this.onChangeRegister(this.renderedValue);
}
/**
@@ -204,7 +238,7 @@ export class DxcTextareaComponent
&.disabled {
cursor: default;
}
- .mat-form-field {
+ .mat-mdc-form-field {
font-family: var(--fontFamily);
line-height: unset;
width: 100%;
@@ -234,8 +268,8 @@ export class DxcTextareaComponent
color: var(--textarea-disabledFontColor);
}
.mat-form-field-wrapper {
- .mat-form-field-flex {
- .mat-form-field-infix input {
+ .mat-mdc-form-field-flex {
+ .mat-mdc-form-field-infix input {
color: var(--textarea-disabledFontColor);
}
}
@@ -304,7 +338,7 @@ export class DxcTextareaComponent
.mat-label{
color: var(--textarea-error) !important;
}
- .mat-form-field {
+ .mat-mdc-form-field {
&.mat-form-field-should-float {
mat-label {
color: var(--textarea-error);
@@ -315,9 +349,9 @@ export class DxcTextareaComponent
color: var(--textarea-error);
}
}
- .mat-form-field {
+ .mat-mdc-form-field {
&.mat-form-field-should-float {
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
padding-bottom: 7px;
}
mat-label {
@@ -338,13 +372,13 @@ export class DxcTextareaComponent
.mat-form-field-subscript-wrapper {
margin-top: 6px;
}
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
padding-top: 6px;
}
}
- .mat-form-field-flex {
+ .mat-mdc-form-field-flex {
align-items: center;
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
border-top: unset;
}
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
index a3efcab2b..73833f3b1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts
@@ -10,7 +10,7 @@ import {
} from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
-import { css } from "emotion";
+import { css } from "@emotion/css";
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { ToggleGroupService } from "./services/toggleGroup.service";
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.module.ts
index 705809154..605610dee 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.module.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.module.ts
@@ -6,9 +6,8 @@ import { DxcToggleComponent } from "./dxc-toggle/dxc-toggle.component";
import { DxcToggleIconComponent } from './dxc-toggle-icon/dxc-toggle-icon.component';
@NgModule({
- declarations: [DxcToggleGroupComponent, DxcToggleComponent, DxcToggleIconComponent],
- imports: [CommonModule, MatIconModule],
- exports: [DxcToggleGroupComponent, DxcToggleComponent, DxcToggleIconComponent],
- entryComponents: [],
+ declarations: [DxcToggleGroupComponent, DxcToggleComponent, DxcToggleIconComponent],
+ imports: [CommonModule, MatIconModule],
+ exports: [DxcToggleGroupComponent, DxcToggleComponent, DxcToggleIconComponent]
})
export class DxcToggleGroupModule {}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-upload.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-upload.component.ts
index 1815d1767..68d04fe3c 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-upload.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-upload/dxc-upload.component.ts
@@ -1,6 +1,6 @@
import { Component, Input, OnChanges, EventEmitter } from "@angular/core";
import { CssUtils } from "../utils";
-import { css } from "emotion";
+import { css } from "@emotion/css";
import { SimpleChanges, HostBinding } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { coerceNumberProperty } from '@angular/cdk/coercion';
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.html
index f6fa413c8..493257cb1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.html
@@ -10,6 +10,7 @@
[disabled]="disabled"
(click)="!disabled ? handleStepClick() : ''"
[tabindex]="disabled ? -1 : tabIndexValue"
+ [attr.aria-current]="isCurrent"
>