Skip to content

Commit 76848da

Browse files
authored
Merge branch 'master' into ibarakov/fix-7878-master
2 parents d6ae800 + aeeeeeb commit 76848da

Some content is hidden

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

44 files changed

+1304
-271
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
<div class="igx-badge__circle" [ngClass]="setClasses()" [attr.aria-roledescription]="roleDescription">
2-
<span *ngIf="!icon" class="igx-badge__circle-value">{{value}}</span>
3-
<igx-icon *ngIf="icon" fontSet="material">{{icon}}</igx-icon>
4-
</div>
1+
<span *ngIf="!icon" class="igx-badge__value">{{value}}</span>
2+
<igx-icon *ngIf="icon">{{icon}}</igx-icon>

projects/igniteui-angular/src/lib/badge/badge.component.spec.ts

+7-8
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ describe('Badge', () => {
3232
expect(badge.value).toBeTruthy();
3333
expect(badge.type).toBeTruthy();
3434

35-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
36-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--error'))).toBeTruthy();
35+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
36+
expect(fixture.debugElement.query(By.css('.igx-badge--error'))).toBeTruthy();
3737

3838
expect(badge.value).toMatch('22');
3939
expect(badge.type).toMatch('error');
@@ -63,9 +63,8 @@ describe('Badge', () => {
6363
expect(badge.value).toMatch('');
6464
expect(badge.icon).toBeFalsy();
6565

66-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
67-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--default'))).toBeTruthy();
68-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--icon'))).toBeFalsy();
66+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
67+
expect(fixture.debugElement.query(By.css('.igx-badge--icon'))).toBeFalsy();
6968
});
7069

7170
it('Initializes badge with icon', () => {
@@ -77,8 +76,8 @@ describe('Badge', () => {
7776
expect(badge.type === IgxBadgeType.INFO).toBeTruthy();
7877
expect(badge.value === '').toBeTruthy();
7978

80-
expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
81-
expect(fixture.debugElement.query(By.css('.igx-badge__circle--info'))).toBeTruthy();
79+
expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
80+
expect(fixture.debugElement.query(By.css('.igx-badge--info'))).toBeTruthy();
8281
});
8382

8483
it('Initializes badge with icon ARIA', () => {
@@ -89,7 +88,7 @@ describe('Badge', () => {
8988
const expectedDescription = `${badge.type} type badge with icon type ${badge.icon}`;
9089
expect(badge.roleDescription).toMatch(expectedDescription);
9190

92-
const container = fixture.nativeElement.querySelectorAll('.igx-badge__circle--default')[0];
91+
const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
9392
expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
9493
});
9594
});

projects/igniteui-angular/src/lib/badge/badge.component.ts

+16-35
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export class IgxBadgeComponent {
153153
* @hidden
154154
* @internal
155155
*/
156+
@HostBinding('attr.aria-roledescription')
156157
get roleDescription() {
157158
// tslint:disable-next-line:prefer-conditional-expression
158159
if (this.icon) {
@@ -163,45 +164,25 @@ export class IgxBadgeComponent {
163164
return this.type + ' badge type without value';
164165
}
165166

166-
/**
167-
* Method which makes the name of the class more descriptive.
168-
* This helps the styling of the badges.
169-
* @hidden
170-
* @internal
171-
*/
172-
public setClasses() {
173-
let classes = {};
167+
@HostBinding('class.igx-badge--info')
168+
public get infoClass() {
169+
return this.type === IgxBadgeType.INFO;
170+
}
174171

175-
switch (IgxBadgeType[this.type.toUpperCase()]) {
176-
case IgxBadgeType.INFO:
177-
classes = {
178-
[`${this.cssClass}__circle--info`]: true
179-
};
180-
break;
181-
case IgxBadgeType.SUCCESS:
182-
classes = {
183-
[`${this.cssClass}__circle--success`]: true
184-
};
185-
break;
186-
case IgxBadgeType.WARNING:
187-
classes = {
188-
[`${this.cssClass}__circle--warning`]: true
189-
};
190-
break;
191-
case IgxBadgeType.ERROR:
192-
classes = {
193-
[`${this.cssClass}__circle--error`]: true
194-
};
195-
break;
196-
default:
197-
classes = {
198-
[`${this.cssClass}__circle--default`]: true
199-
};
200-
}
172+
@HostBinding('class.igx-badge--success')
173+
public get successClass() {
174+
return this.type === IgxBadgeType.SUCCESS;
175+
}
201176

202-
return classes;
177+
@HostBinding('class.igx-badge--warning')
178+
public get warningClass() {
179+
return this.type === IgxBadgeType.WARNING;
203180
}
204181

182+
@HostBinding('class.igx-badge--error')
183+
public get errorClass() {
184+
return this.type === IgxBadgeType.ERROR;
185+
}
205186
}
206187

207188
/**

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

+27-10
Original file line numberDiff line numberDiff line change
@@ -477,17 +477,34 @@
477477
}
478478

479479
@function igx-generate-series-colors($palette) {
480+
$color-blind: if(global-variable-exists('_igx-enhanced-accessibility'), $_igx-enhanced-accessibility, false);
481+
482+
@if $color-blind {
483+
@return (
484+
rgb(86, 180, 233),
485+
rgb(0, 158, 115),
486+
rgb(240, 228, 68),
487+
rgb(213, 94, 0),
488+
rgb(214, 0, 254),
489+
rgb(0, 73, 159),
490+
rgb(230, 159, 0),
491+
rgb(0, 0, 0),
492+
rgb(132, 240, 223),
493+
rgb(115, 86, 86),
494+
);
495+
}
496+
480497
@return (
481-
igx-color($palette, 'primary'),
482-
igx-color($palette, 'secondary'),
483-
rgb(249, 98, 50),
484-
rgb(60, 189, 201),
485-
rgb(220, 63, 118),
486-
rgb(255, 152, 0),
487-
rgb(78, 98, 207),
488-
rgb(84, 194, 90),
489-
rgb(121, 85, 72),
490-
rgb(154, 154, 154)
498+
rgb(157, 231, 114),
499+
rgb(139, 91, 177),
500+
rgb(109, 177, 255),
501+
rgb(154, 242, 228),
502+
rgb(238, 88, 121),
503+
rgb(115, 86, 86),
504+
rgb(247, 210, 98),
505+
rgb(168, 168, 183),
506+
rgb(224, 81, 169),
507+
rgb(248, 161, 95),
491508
);
492509
}
493510

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss

+9-18
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,28 @@
1111

1212
@extend %igx-badge-display !optional;
1313

14-
@include e(circle) {
15-
@extend %igx-badge-display !optional;
16-
@extend %igx-badge--circle !optional;
17-
}
18-
19-
@include e(circle-value) {
14+
@include e(value) {
2015
@extend %igx-badge-value !optional;
2116
}
2217

23-
@include e(circle, $m: default) {
18+
@include m(default) {
2419
@extend %igx-badge--default !optional;
2520
}
2621

27-
@include e(circle, $m: info) {
28-
@extend %igx-badge-display !optional;
22+
@include m(info) {
2923
@extend %igx-badge--info !optional;
3024
}
3125

32-
@include e(circle, $m: success) {
33-
@extend %igx-badge-display !optional;
34-
@extend %igx-circle--success !optional;
26+
@include m(success) {
27+
@extend %igx-badge--success !optional;
3528
}
3629

37-
@include e(circle, $m: warning) {
38-
@extend %igx-badge-display !optional;
39-
@extend %igx-circle--warn !optional;
30+
@include m(warning) {
31+
@extend %igx-badge--warn !optional;
4032
}
4133

42-
@include e(circle, $m: error) {
43-
@extend %igx-badge-display !optional;
44-
@extend %igx-circle--error !optional;
34+
@include m(error) {
35+
@extend %igx-badge--error !optional;
4536
}
4637

4738
@include m(hidden) {

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

+10-16
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,13 @@
124124
font-weight: $badge-font-weight;
125125
color: --var($theme, 'text-color');
126126
line-height: 1;
127+
background: --var($theme, 'background-color');
128+
border-radius: --var($theme, 'border-radius');
129+
box-shadow: --var($theme, 'shadow');
130+
border-width: --var($theme, 'border-width');
131+
border-color: --var($theme, 'border-color');
132+
border-style: $border-type;
133+
overflow: hidden;
127134

128135
igx-icon {
129136
display: inline-flex;
@@ -142,32 +149,19 @@
142149
padding: $badge-value-padding;
143150
}
144151

145-
%igx-badge--circle {
146-
border-radius: --var($theme, 'border-radius');
147-
box-shadow: --var($theme, 'shadow');
148-
border-width: --var($theme, 'border-width');
149-
border-color: --var($theme, 'border-color');
150-
border-style: $border-type;
151-
overflow: hidden;
152-
}
153-
154-
%igx-badge--default {
155-
background: --var($theme, 'background-color');
156-
}
157-
158-
%igx-circle--success {
152+
%igx-badge--success {
159153
background: igx-color($palette, 'success');
160154
}
161155

162156
%igx-badge--info {
163157
background: igx-color($palette, 'info');
164158
}
165159

166-
%igx-circle--warn {
160+
%igx-badge--warn {
167161
background: igx-color($palette, 'warn');
168162
}
169163

170-
%igx-circle--error {
164+
%igx-badge--error {
171165
background: igx-color($palette, 'error');
172166
}
173167

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

+4
Original file line numberDiff line numberDiff line change
@@ -88,20 +88,24 @@
8888

8989
/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
9090
/// @param {string} $direction [ltr] - Sets the layout direction. Can be 'ltr' or 'rtl'.
91+
/// @param {boolean} $enhanced-accesibility [false] - Switches component colors and other properties to more accessible values.
9192
/// @param {color} $foreground-color [0, 0, 0, .87] - Sets the value of the global $igx-foreground-color used in all typography styles.
9293
/// @requires {mixin} igx-typography
9394
/// @requires {mixin} igx-vhelper
9495
/// @requires {mixin} igx-print-layout
9596
@mixin igx-core(
9697
$print-layout: true,
9798
$direction: ltr,
99+
$enhanced-accessibility: false
98100
) {
99101
@if $direction != ltr and $direction != rtl {
100102
$direction: ltr !global;
101103
} @else {
102104
$direction: $direction !global;
103105
}
104106

107+
$_igx-enhanced-accessibility: $enhanced-accessibility !global;
108+
105109
@include igx-typography();
106110
@include igx-vhelper();
107111

projects/igniteui-angular/src/lib/core/utils.ts

+35-6
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,34 @@ export function cloneValue(value: any): any {
103103
return value;
104104
}
105105

106+
/**
107+
* Parse provided input to Date.
108+
* @param value input to parse
109+
* @returns Date if parse succeed or null
110+
* @hidden
111+
*/
112+
export function parseDate(value: any): Date | null {
113+
// if value is Invalid Date return null
114+
if (isDate(value)) {
115+
return !isNaN(value.getTime()) ? value : null;
116+
}
117+
return value ? new Date(value) : null;
118+
}
119+
120+
/**
121+
* Returns an array with unique dates only.
122+
* @param columnValues collection of date values (might be numbers or ISO 8601 strings)
123+
* @returns collection of unique dates.
124+
* @hidden
125+
*/
126+
export function uniqueDates(columnValues: any[]) {
127+
return columnValues.reduce((a, c) => {
128+
if (!a.cache[c.label]) { a.result.push(c); }
129+
a.cache[c.label] = true;
130+
return a;
131+
}, {result: [], cache: {}}).result;
132+
}
133+
106134
/**
107135
* Checks if provided variable is Object
108136
* @param value Value to check
@@ -119,8 +147,8 @@ export function isObject(value: any): boolean {
119147
* @returns true if provided variable is Date
120148
* @hidden
121149
*/
122-
export function isDate(value: any) {
123-
return Object.prototype.toString.call(value) === '[object Date]';
150+
export function isDate(value: any): boolean {
151+
return value instanceof Date;
124152
}
125153

126154
/**
@@ -326,9 +354,9 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
326354
event?: Event;
327355
}
328356

329-
export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs {}
357+
export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs { }
330358

331-
export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs {}
359+
export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs { }
332360

333361
export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
334362

@@ -349,7 +377,8 @@ export const NAVIGATION_KEYS = new Set([
349377
]);
350378
export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
351379
export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
352-
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+', 'add']);
380+
export const ROW_ADD_KEYS = new Set(['+', 'add', '≠', '±', '=']);
381+
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), ...Array.from(ROW_ADD_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
353382
export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l',
354383
/** This symbol corresponds to the Alt + L combination under MAC. */
355384
'¬']);
@@ -464,7 +493,7 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index:
464493
let i = 0;
465494
const chunk = () => {
466495
const end = Math.min(i + chunkSize, count);
467-
for ( ; i < end; ++i) {
496+
for (; i < end; ++i) {
468497
callback(i);
469498
}
470499
if (i < count) {

0 commit comments

Comments
 (0)