Skip to content

Commit 46660ed

Browse files
kdinevkdinev
authored
Merge branch 'master' into rivanova/fix-13220-master
2 parents bbbe08a + 6570f3a commit 46660ed

23 files changed

+440
-86
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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.0",
70+
"igniteui-theming": "^3.1.1",
7171
"igniteui-trial-watermark": "^2.0.0",
7272
"lodash-es": "^4.17.21",
7373
"rxjs": "^6.6.7",

‎projects/igniteui-angular-i18n/package.json‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,5 @@
2121
"bugs": {
2222
"url": "https://github.com/IgniteUI/igniteui-angular/issues"
2323
},
24-
"homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme",
25-
"ng-update": {
26-
"packageGroup": [
27-
"igniteui-angular-i18n",
28-
"igniteui-angular",
29-
"@infragistics/igniteui-angular",
30-
"@igniteui/angular-schematics"
31-
]
32-
}
24+
"homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme"
3325
}

‎projects/igniteui-angular/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"igniteui-trial-watermark": "^1.0.3",
7777
"lodash-es": "^4.17.21",
7878
"uuid": "^9.0.0",
79-
"igniteui-theming": "^3.1.0",
79+
"igniteui-theming": "^3.1.1",
8080
"@igniteui/material-icons-extended": "^3.0.0"
8181
},
8282
"peerDependencies": {
@@ -92,9 +92,7 @@
9292
"migrations": "./migrations/migration-collection.json",
9393
"packageGroup": [
9494
"igniteui-angular",
95-
"@infragistics/igniteui-angular",
96-
"igniteui-angular-i18n",
97-
"@igniteui/angular-schematics"
95+
"igniteui-angular-i18n"
9896
]
9997
},
10098
"schematics": "./schematics/collection.json",

‎projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414

1515
@extend %igx-divider-display !optional;
1616

17+
@include m(inset) {
18+
@extend %igx-divider--inset !optional;
19+
}
20+
1721
@include m(dashed) {
1822
@extend %igx-divider--dashed !optional;
1923
}
@@ -22,8 +26,8 @@
2226
@extend %igx-divider--vertical !optional;
2327
}
2428

25-
@include mx(vertical, dashed) {
26-
@extend %igx-divider--vertical-dashed !optional;
29+
@include mx(vertical, inset) {
30+
@extend %igx-divider--vertical-inset !optional;
2731
}
2832
}
2933
}

‎projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss‎

Lines changed: 74 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@
1111

1212
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
1313
/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
14+
/// @param {number} $inset [null] - The inset value of the divider.
1415
/// @requires $light-material-schema
1516
/// @example scss Change the color of the divider
1617
/// $my-divider-theme: divider-theme($color: orange);
1718
/// // Pass the theme to the css-vars() mixin
1819
/// @include css-vars($my-divider-theme);
1920
@function divider-theme(
2021
$schema: $light-material-schema,
21-
$color: null
22+
$color: null,
23+
$inset: null
2224
) {
2325
$name: 'igx-divider';
2426
$divider-schema: ();
@@ -33,7 +35,8 @@
3335

3436
@return extend($theme, (
3537
name: $name,
36-
color: $color
38+
color: $color,
39+
inset: $inset
3740
));
3841
}
3942

@@ -42,26 +45,83 @@
4245
@include css-vars($theme);
4346

4447
%igx-divider-display {
45-
display: block;
46-
height: rem(1px);
47-
background: var-get($theme, 'color');
48-
margin: var(--igx-divider-inset, var(--inset, var(--_inset)));
48+
position: relative;
49+
justify-content: center;
50+
overflow: hidden;
51+
52+
&::after {
53+
content: '';
54+
position: absolute;
55+
height: 100%;
56+
width: 100%;
57+
background: var-get($theme, 'color');
58+
}
59+
}
60+
61+
%igx-divider-display:not(%igx-divider--vertical) {
62+
display: flex;
63+
min-height: rem(1px);
64+
width: 100%;
65+
position: relative;
66+
67+
&::after {
68+
inset-inline-start: var-get($theme, 'inset');
69+
}
70+
71+
&:not(%igx-divider--inset) {
72+
&::after {
73+
width: 100%;
74+
}
75+
}
76+
}
77+
78+
%igx-divider--inset:not(%igx-divider--vertical) {
79+
&::after {
80+
min-width: rem(4px);
81+
width: calc(100% - (var-get($theme, 'inset') * 2));
82+
}
83+
}
84+
85+
%igx-divider--dashed:not(%igx-divider--vertical) {
86+
&::after {
87+
background: repeating-linear-gradient(
88+
to right,
89+
var-get($theme, 'color'),
90+
var-get($theme, 'color') rem(10px),
91+
transparent rem(10px),
92+
transparent rem(20px)
93+
);
94+
}
4995
}
5096

5197
%igx-divider--dashed {
52-
background: linear-gradient(to right, var-get($theme, 'color') 50%, transparent 50%);
53-
background-size: rem(10px) rem(1px); /* dash size */
98+
&::after {
99+
background: repeating-linear-gradient(
100+
to bottom,
101+
var-get($theme, 'color'),
102+
var-get($theme, 'color') rem(10px),
103+
transparent rem(10px),
104+
transparent rem(20px)
105+
);
106+
}
54107
}
55108

56109
%igx-divider--vertical {
57-
display: inline-block;
58-
width: rem(1px);
110+
display: inline-flex;
59111
min-width: rem(1px);
60-
height: auto;
112+
width: rem(1px);
113+
114+
&::after {
115+
inset-block-start: var-get($theme, 'inset');
116+
width: 100%;
117+
height: 100%;
118+
}
61119
}
62120

63-
%igx-divider--vertical-dashed {
64-
background: linear-gradient(to bottom, var-get($theme, 'color') 50%, transparent 50%);
65-
background-size: rem(1px) rem(10px); /* dash size */
121+
%igx-divider--vertical-inset {
122+
&::after {
123+
min-height: rem(4px);
124+
height: calc(100% - (var-get($theme, 'inset') * 2));
125+
}
66126
}
67127
}

‎projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
///
1717
/// @param {Color} $background [null] - The background color used for the toast.
1818
/// @param {Color} $text-color [null] - The text-color used for the toast.
19+
/// @param {Color} $border-color [null] - The border-color used for the toast.
1920
///
2021
/// @param {List} $border-radius [null] - The border radius used for the toast component.
2122
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast.
@@ -30,6 +31,7 @@
3031
$schema: $light-material-schema,
3132
3233
$border-radius: null,
34+
$border-color: null,
3335
$background: null,
3436
$text-color: null,
3537
$shadow: null,
@@ -60,6 +62,7 @@
6062
background: $background,
6163
border-radius: $border-radius,
6264
text-color: $text-color,
65+
border-color: $border-color,
6366
shadow: $shadow,
6467
_meta: map.merge(if($meta, $meta, ()), (
6568
variant: map.get($schema, '_meta', 'theme')
@@ -83,13 +86,6 @@
8386
'indigo-design': rem(14px) rem(24px)
8487
), $variant);
8588

86-
$border: map.get((
87-
'material': none,
88-
'fluent': none,
89-
'bootstrap': rem(1px) solid color(null, 'gray', 300),
90-
'indigo-design': none
91-
), $variant);
92-
9389
%igx-toast-display {
9490
display: inline-flex;
9591
justify-content: center;
@@ -99,7 +95,7 @@
9995
min-width: $width;
10096
color: var-get($theme, 'text-color');
10197
background: var-get($theme, 'background');
102-
border: $border;
98+
border: rem(1px) solid var-get($theme, 'border-color');
10399
border-radius: var-get($theme, 'border-radius');
104100
box-shadow: map.get($theme, 'shadow');
105101
backdrop-filter: blur(10px);

‎projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,22 @@ export class IgxDividerDirective {
8383
* this.divider.inset = '32px';
8484
* ```
8585
*/
86-
@HostBinding('style.--_inset')
86+
@HostBinding('style.--inset')
8787
public set inset(value: string) {
8888
this._inset = value;
8989
}
9090

9191
/**
9292
* Gets the current divider inset in terms of
93-
* margin representation as applied to the divider.
93+
* inset-inline-start representation as applied to the divider.
9494
* ```typescript
9595
* const inset = this.divider.inset;
9696
* ```
9797
*/
9898
public get inset() {
99-
const baseMargin = '0';
100-
101-
if (this.middle) {
102-
if (this.vertical) {
103-
return `${this._inset} ${baseMargin}`;
104-
}
105-
return `${baseMargin} ${this._inset}`;
106-
} else {
107-
if (this.vertical) {
108-
return `${this._inset} ${baseMargin} 0 ${baseMargin}`;
109-
}
110-
return `${baseMargin} 0 ${baseMargin} ${this._inset}`;
111-
}
99+
return this._inset;
112100
}
113101

114-
115102
/**
116103
* An @Input property that sets the value of the `inset` attribute.
117104
* If not provided it will be set to `'0'`.
@@ -131,6 +118,7 @@ export class IgxDividerDirective {
131118
public get isSolid() {
132119
return this.type === IgxDividerType.SOLID;
133120
}
121+
134122
}
135123

136124

‎projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,14 @@ describe('Divider', () => {
7272
expect(divider.nativeElement).toHaveClass(classes.inset);
7373
});
7474

75-
it('should set in the divider by the specified inset amount', () => {
75+
it('should inset the divider by the specified amount', () => {
7676
const inset = '16px';
7777
const divider = fixture.debugElement.query(By.css('igx-divider'));
78-
const insetVar = () => window.getComputedStyle(divider.nativeElement).getPropertyValue('--_inset');
78+
const insetVar = () => window.getComputedStyle(divider.nativeElement).getPropertyValue('--inset');
7979
fixture.componentInstance.inset = inset;
8080
fixture.detectChanges();
8181

82-
expect(insetVar()).toEqual(`0 0 0 ${inset}`);
83-
84-
fixture.componentInstance.middle = true;
85-
fixture.detectChanges();
86-
87-
expect(insetVar()).toEqual(`0 ${inset}`);
88-
89-
fixture.componentInstance.vertical = true;
90-
fixture.detectChanges();
91-
92-
expect(insetVar()).toEqual(`${inset} 0`);
93-
94-
fixture.componentInstance.middle = false;
95-
fixture.detectChanges();
96-
97-
expect(insetVar()).toEqual(`${inset} 0 0 0`);
82+
expect(insetVar()).toEqual(`${inset}`);
9883
});
9984

10085
it('should change the role of the divider to the specified value', () => {

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,17 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
104104
* ```
105105
*/
106106
@Input()
107-
public data: any = [];
107+
public get data(): any {
108+
return this._data || [];
109+
}
110+
111+
public set data(value: any) {
112+
this._data = value;
113+
if (this.hGrid) {
114+
this.hGrid.data = this._data.childGridsData[this.layout.key];
115+
}
116+
}
117+
108118
/**
109119
* The index of the row.
110120
*
@@ -171,6 +181,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
171181
*/
172182
public expanded = false;
173183

184+
private _data: any;
185+
174186
constructor(
175187
@Inject(IGX_GRID_SERVICE_BASE) public readonly gridAPI: IgxHierarchicalGridAPIService,
176188
public element: ElementRef<HTMLElement>,

0 commit comments

Comments
 (0)