Skip to content

Commit 94fcfc8

Browse files
committed
Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into bundle-test-extended
2 parents 4637e94 + cc47914 commit 94fcfc8

File tree

79 files changed

+334
-300
lines changed

Some content is hidden

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

79 files changed

+334
-300
lines changed

CHANGELOG.md

+30
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,33 @@ All notable changes for each version of this project will be documented in this
1616
- IgxRadioComponent has been reduced in half
1717
- IgxSwitchComponent has been reduced in half
1818

19+
## 16.1.4
20+
### New Features
21+
- `Themes`:
22+
- **Experimental** - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.
23+
24+
- Code example:
25+
26+
```scss
27+
// Configure the base font-size
28+
@use 'igniteui-theming/sass/config' as * with (
29+
$base-font-size: 10px // <-- 10px == 1rem
30+
);
31+
32+
// Standard imports and theme declarations
33+
@use 'igniteui-angular/src/lib/core/styles/themes' as *;
34+
35+
// This change also adds a new CSS variable `--ig-base-font-size`
36+
// that you can use to configure your own stylesheets:
37+
html {
38+
font-size: var(--ig-base-font-size); // 10px
39+
}
40+
41+
@include core();
42+
@include typography();
43+
@include theme();
44+
```
45+
1946
## 16.1.0
2047
### New Features
2148
- `IgxSelect`:
@@ -93,6 +120,9 @@ All notable changes for each version of this project will be documented in this
93120
- **Behavioral Change** When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
94121
- `IgxCombo`, `IgxSimpleCombo`:
95122
- **Breaking Change** The `selection` property returns an array of the selected items even when a value key is provided and the `value` property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on `ng update`.
123+
- Improved tree-shaking support for the `@igniteui/material-icons-extended` package.
124+
- Improved tree-shaking support for the `igniteui-angular-i18n` package.
125+
- Improved tree-shaking support for all grids.
96126

97127
## 16.0.0
98128

package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@types/source-map": "0.5.2",
6868
"fflate": "^0.7.3",
6969
"hammerjs": "^2.0.8",
70-
"igniteui-theming": "^3.1.1",
70+
"igniteui-theming": "^3.3.0",
7171
"igniteui-trial-watermark": "^3.0.2",
7272
"lodash-es": "^4.17.21",
7373
"rxjs": "^6.6.7",

projects/igniteui-angular/migrations/common/UpdateChanges.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ export class UpdateChanges {
478478
protected updateSassVariables(entryPath: string) {
479479
let fileContent = this.host.read(entryPath).toString();
480480
let overwrite = false;
481-
const allowedStartCharacters = new RegExp('(\:|\,)\s?', 'g');
481+
const allowedStartCharacters = new RegExp(/(:|,)\s?/, 'g');
482482
// eslint-disable-next-line no-control-regex
483483
const allowedEndCharacters = new RegExp('[;),: \r\n]', 'g');
484484
for (const change of this.themeChanges.changes) {

projects/igniteui-angular/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"igniteui-trial-watermark": "^3.0.2",
7777
"lodash-es": "^4.17.21",
7878
"uuid": "^9.0.0",
79-
"igniteui-theming": "^3.1.1",
79+
"igniteui-theming": "^3.3.0",
8080
"@igniteui/material-icons-extended": "^3.0.0"
8181
},
8282
"peerDependencies": {

projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<ng-content #content></ng-content>
33
<ng-container *ngIf="menuItems.length > 0">
44
<button
5+
type="button"
56
igxButton="icon"
67
igxRipple
78
[igxToggleAction]="dropdown"
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<ng-container *ngIf="!asMenuItem">
2-
<button [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
2+
<button type="button" [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
33
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
44
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
55
</button>
66
</ng-container>
77

88
<ng-template #menuItemTemplate>
99
<ng-container *ngIf="asMenuItem">
10-
<div #container [className]='containerClass'>
10+
<div #container [className]="containerClass">
1111
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
1212
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
1313
<label igxLabel>{{labelText}}</label>
1414
</div>
1515
</ng-container>
16-
</ng-template>
16+
</ng-template>

projects/igniteui-angular/src/lib/banner/banner.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
<div class="igx-banner__actions">
1414
<ng-container *ngIf="useDefaultTemplate">
15-
<button igxButton="flat" igxRipple (click)="close()">
15+
<button type="button" igxButton="flat" igxRipple (click)="close()">
1616
{{ resourceStrings.igx_banner_button_dismiss }}
1717
</button>
1818
</ng-container>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
4444
* <igx-banner #banner>
4545
* Our privacy settings have changed.
4646
* <igx-banner-actions>
47-
* <button igxButton="raised">Read More</button>
48-
* <button igxButton="raised">Accept and Continue</button>
47+
* <button type="button" igxButton="raised">Read More</button>
48+
* <button type="button" igxButton="raised">Accept and Continue</button>
4949
* </igx-banner-actions>
5050
* </igx-banner>
5151
* ```
@@ -217,7 +217,7 @@ export class IgxBannerComponent implements IToggleView {
217217
* <igx-banner #banner>
218218
* ...
219219
* </igx-banner>
220-
* <button (click)="banner.open()">Open Banner</button>
220+
* <button type="button" (click)="banner.open()">Open Banner</button>
221221
* ```
222222
*/
223223
public open(event?: Event) {
@@ -246,7 +246,7 @@ export class IgxBannerComponent implements IToggleView {
246246
* <igx-banner #banner>
247247
* ...
248248
* </igx-banner>
249-
* <button (click)="banner.close()">Close Banner</button>
249+
* <button type="button" (click)="banner.close()">Close Banner</button>
250250
* ```
251251
*/
252252
public close(event?: Event) {
@@ -275,7 +275,7 @@ export class IgxBannerComponent implements IToggleView {
275275
* <igx-banner #banner>
276276
* ...
277277
* </igx-banner>
278-
* <button (click)="banner.toggle()">Toggle Banner</button>
278+
* <button type="button" (click)="banner.toggle()">Toggle Banner</button>
279279
* ```
280280
*/
281281
public toggle(event?: Event) {

projects/igniteui-angular/src/lib/card/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ Supporting directives and components:
2828
</igx-card-content>
2929

3030
<igx-card-actions>
31-
<button igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
32-
<button igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
31+
<button type="button" igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
32+
<button type="button" igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
3333
</igx-card-actions>
3434
</igx-card>
3535
```

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,8 @@ export class IgxCardFooterDirective {
187187
* <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
188188
* </igx-card-header>
189189
* <igx-card-actions>
190-
* <button igxButton igxRipple>Share</button>
191-
* <button igxButton igxRipple>Play Album</button>
190+
* <button type="button" igxButton igxRipple>Share</button>
191+
* <button type="button" igxButton igxRipple>Play Album</button>
192192
* </igx-card-actions>
193193
* </igx-card>
194194
* ```

projects/igniteui-angular/src/lib/carousel/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
6161
<igx-carousel #carousel>
6262
...
6363
<ng-template igxCarouselNextButton let-disabled>
64-
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
64+
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
6565
<igx-icon>add</igx-icon>
6666
</button>
6767
</ng-template>
@@ -73,7 +73,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
7373
<igx-carousel #carousel>
7474
...
7575
<ng-template igxCarouselPrevButton let-disabled>
76-
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
76+
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
7777
<igx-icon>remove</igx-icon>
7878
</button>
7979
</ng-template>

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -269,9 +269,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
269269
* <igx-carousel #carousel>
270270
* ...
271271
* <ng-template igxCarouselNextButton let-disabled>
272-
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
273-
* <igx-icon>add</igx-icon>
274-
* </button>
272+
* <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
273+
* <igx-icon>add</igx-icon>
274+
* </button>
275275
* </ng-template>
276276
* </igx-carousel>
277277
* ```
@@ -292,9 +292,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
292292
* <igx-carousel #carousel>
293293
* ...
294294
* <ng-template igxCarouselPrevButton let-disabled>
295-
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
296-
* <igx-icon>remove</igx-icon>
297-
* </button>
295+
* <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
296+
* <igx-icon>remove</igx-icon>
297+
* </button>
298298
* </ng-template>
299299
* </igx-carousel>
300300
* ```

projects/igniteui-angular/src/lib/combo/combo.common.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -647,7 +647,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
647647
* <igx-combo #combo>
648648
* ...
649649
* <ng-template igxComboAddItem>
650-
* <button class="combo__add-button">
650+
* <button type="button" igxButton="raised" class="combo__add-button">
651651
* Click to add item
652652
* </button>
653653
* </ng-template>
@@ -1029,7 +1029,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10291029
* A method that opens/closes the combo.
10301030
*
10311031
* ```html
1032-
* <button (click)="combo.toggle()">Toggle Combo</button>
1032+
* <button type="button" (click)="combo.toggle()">Toggle Combo</button>
10331033
* <igx-combo #combo></igx-combo>
10341034
* ```
10351035
*/
@@ -1049,7 +1049,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10491049
* A method that opens the combo.
10501050
*
10511051
* ```html
1052-
* <button (click)="combo.open()">Open Combo</button>
1052+
* <button type="button" (click)="combo.open()">Open Combo</button>
10531053
* <igx-combo #combo></igx-combo>
10541054
* ```
10551055
*/
@@ -1067,7 +1067,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
10671067
* A method that closes the combo.
10681068
*
10691069
* ```html
1070-
* <button (click)="combo.close()">Close Combo</button>
1070+
* <button type="button" (click)="combo.close()">Close Combo</button>
10711071
* <igx-combo #combo></igx-combo>
10721072
* ```
10731073
*/

projects/igniteui-angular/src/lib/combo/combo.component.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<input igxInput #comboInput name="comboInput" type="text" [value]="displayValue.join(', ')" readonly
1212
[attr.placeholder]="placeholder" [disabled]="disabled"
1313
role="combobox" aria-haspopup="listbox"
14-
[attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
15-
[attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
14+
[attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
15+
[attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
1616
(blur)="onBlur()" />
1717
<ng-container ngProjectAs="igx-suffix">
1818
<ng-content select="igx-suffix"></ng-content>
@@ -28,15 +28,15 @@
2828
</igx-suffix>
2929
<igx-suffix class="igx-combo__toggle-button">
3030
<ng-container *ngIf="toggleIconTemplate">
31-
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
31+
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
3232
</ng-container>
3333
<igx-icon *ngIf="!toggleIconTemplate">
3434
{{ toggleIcon }}
3535
</igx-icon>
3636
</igx-suffix>
3737
</igx-input-group>
3838
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
39-
[labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
39+
[labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
4040
[width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
4141
(opened)="handleOpened()" (closed)="handleClosed()">
4242
<div class="igx-combo__search">
@@ -57,8 +57,8 @@
5757
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
5858
[style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
5959
[tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
60-
[attr.aria-activedescendant]="this.activeDescendant">
61-
<igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data
60+
[attr.aria-activedescendant]="activeDescendant">
61+
<igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
6262
| comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
6363
| comboGrouping:groupKey:valueKey:groupSortingDirection;
6464
index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
@@ -102,7 +102,7 @@
102102
<span>{{resourceStrings.igx_combo_empty_message}}</span>
103103
</ng-template>
104104
<ng-template #addItemDefault let-control>
105-
<button igxButton="flat" igxRipple>Add item</button>
105+
<button type="button" igxButton="flat" igxRipple>Add item</button>
106106
</ng-template>
107107
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
108108
{{ item[key] }}

projects/igniteui-angular/src/lib/combo/combo.directives.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export class IgxComboHeaderItemDirective { }
125125
* @example
126126
* <igx-combo #combo>
127127
* <ng-template igxComboAddItem>
128-
* <button class="combo__add-button">
128+
* <button type="button" class="combo__add-button">
129129
* Click to add item
130130
* </button>
131131
* </ng-template>

projects/igniteui-angular/src/lib/core/navigation/directives.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { IgxNavigationService } from './nav.service';
66
*
77
* Usage:
88
* ```
9-
* <button igxNavToggle="ID"> Toggle </button>
9+
* <button type="button" igxNavToggle="ID">Toggle</button>
1010
* ```
1111
* Where the `ID` matches the ID of compatible `IToggleView` component.
1212
*/
@@ -34,7 +34,7 @@ export class IgxNavigationToggleDirective {
3434
*
3535
* Usage:
3636
* ```
37-
* <button igxNavClose="ID"> Close </button>
37+
* <button type="button" igxNavClose="ID">Close</button>
3838
* ```
3939
* Where the `ID` matches the ID of compatible `IToggleView` component.
4040
*/

projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
}
5353

5454
igc-rating::part(value-label) {
55-
color: color(null, 'gray', 900);
55+
color: var-get($theme, 'value-label');
5656
}
5757

5858
igc-rating[disabled]::part(label),
@@ -61,9 +61,9 @@
6161
}
6262

6363
igc-rating[disabled] {
64-
--symbol-empty-color: var(--disabled-empty-symbol-color);
65-
--symbol-full-color: var(--disabled-full-symbol-color);
66-
--symbol-empty-filter: grayscale(100%) opacity(50%);
67-
--symbol-full-filter: grayscale(50%);
64+
--symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
65+
--symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
66+
--disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')};
67+
--disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')};
6868
}
6969
}

0 commit comments

Comments
 (0)