Skip to content

Commit 9995478

Browse files
teodosiahteodosiah
committed
Merge branch 'dmdimitrov/hgrid-advanced-filtering' of https://github.com/IgniteUI/igniteui-angular into dmdimitrov/hgrid-advanced-filtering
2 parents f90fa21 + 8916747 commit 9995478

File tree

9 files changed

+172
-18
lines changed

9 files changed

+172
-18
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ All notable changes for each version of this project will be documented in this
1414
- In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true).
1515
- In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns.
1616
- `IgxHierarchicalGrid`
17-
- New advanced filtering functionality is implemented.
17+
- Introduced a new advanced filtering capability that enables top-level records to be dynamically refined based on the attributes or data of their associated child records.
1818
- Added a new `schema` input property that can be used to pass collection of `EntityType` objects. This property is required for remote data scenarios.
1919
- `IgxQueryBuilderComponent`, `IgxAdvancedFilteringDialogComponent`
2020
- Added support for entities with hierarchical structure.

‎projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,11 @@
200200
igx-icon {
201201
color: var-get($theme, 'delete-action');
202202
}
203+
204+
[igxIconButton] {
205+
igx-icon {
206+
color: var-get($theme, 'delete-action');
207+
}
208+
}
203209
}
204210
}

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,18 @@
393393
@extend %date-last-preview-special !optional;
394394
}
395395

396+
@include e(date, $mods: ('first', 'range-preview', 'active')) {
397+
@extend %date-first-preview-active !optional;
398+
}
399+
400+
@include e(date, $mods: ('last', 'range-preview', 'active')) {
401+
@extend %date-last-preview-active !optional;
402+
}
403+
404+
@include e(date, $mods: ('first', 'last', 'selected')) {
405+
@extend %date-first-last-selected !optional;
406+
}
407+
396408
@include e(date, $mods: ('first', 'range-preview', 'special', 'current')) {
397409
@extend %date-first-preview-special-current !optional;
398410
}

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 86 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1543,7 +1543,9 @@
15431543
%date-selected-special-active {
15441544
%date-inner {
15451545
&::after {
1546-
border-color: var-get($theme, 'date-selected-special-focus-border-color');
1546+
@if $variant != 'fluent' {
1547+
border-color: var-get($theme, 'date-selected-special-focus-border-color');
1548+
}
15471549
}
15481550
}
15491551
}
@@ -1606,7 +1608,9 @@
16061608
%date-selected-special-current-first-last {
16071609
%date-inner {
16081610
&::after {
1609-
border-color: var-get($theme, 'date-selected-special-border-color');
1611+
@if $variant != 'fluent' {
1612+
border-color: var-get($theme, 'date-selected-special-border-color');
1613+
}
16101614
}
16111615
}
16121616
}
@@ -1779,7 +1783,9 @@
17791783
%date-special-current-selected-active {
17801784
%date-inner {
17811785
&::after {
1782-
border-color: var-get($theme, 'date-selected-special-border-color');
1786+
@if $variant != 'fluent' {
1787+
border-color: var-get($theme, 'date-selected-special-border-color');
1788+
}
17831789
}
17841790
}
17851791
}
@@ -1852,6 +1858,16 @@
18521858
}
18531859
}
18541860

1861+
@if $variant == 'fluent' {
1862+
%date-selected-current-special {
1863+
%date-inner {
1864+
&::after {
1865+
border-color: var-get($theme, 'date-selected-current-background');
1866+
}
1867+
}
1868+
}
1869+
}
1870+
18551871
%date-inactive {
18561872
cursor: default;
18571873

@@ -2007,7 +2023,7 @@
20072023
%date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
20082024
%date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
20092025
%date-inner {
2010-
@if not $bootstrap-theme {
2026+
@if not $bootstrap-theme and not $variant == 'fluent' {
20112027
color: var-get($theme, 'date-special-focus-foreground');
20122028
}
20132029

@@ -2157,7 +2173,6 @@
21572173
position: absolute;
21582174
height: $date-size;
21592175
width: $date-size;
2160-
border-radius: var-get($theme, 'date-border-radius');
21612176
}
21622177
}
21632178

@@ -2183,7 +2198,32 @@
21832198
&::after {
21842199
width: $date-inner-size;
21852200
height: $date-inner-size;
2186-
border-color: var-get($theme, 'date-selected-special-border-color');
2201+
2202+
@if $variant != 'fluent' {
2203+
border-color: var-get($theme, 'date-selected-special-border-color');
2204+
}
2205+
}
2206+
}
2207+
}
2208+
2209+
@if $variant == 'fluent' {
2210+
%date-first-preview-active {
2211+
%date-inner {
2212+
background: transparent;
2213+
border-inline-end-color: transparent;
2214+
}
2215+
}
2216+
2217+
%date-last-preview-active {
2218+
%date-inner {
2219+
background: transparent;
2220+
border-inline-start-color: transparent;
2221+
}
2222+
}
2223+
2224+
%date-first-last-selected {
2225+
%date-inner {
2226+
background: transparent;
21872227
}
21882228
}
21892229
}
@@ -2303,24 +2343,61 @@
23032343
content: '';
23042344
position: absolute;
23052345
height: $date-size;
2306-
width: calc($date-size / 2 + #{$border-size});
2346+
width: $date-size;
23072347
border: rem(1px) solid var-get($theme, 'date-range-border-color');
23082348
z-index: 3;
23092349
pointer-events: none;
23102350
}
23112351
}
23122352

23132353
%date-range-selected-first {
2354+
%date-inner {
2355+
border-start-end-radius: var-get($theme, 'date-border-radius');
2356+
border-end-end-radius: var-get($theme, 'date-border-radius');
2357+
}
2358+
23142359
&::before {
2315-
inset-inline-end: calc(50% - #{$border-size});
23162360
border-inline-end-color: transparent;
2361+
border-start-start-radius: var-get($theme, 'date-range-border-radius');
2362+
border-end-start-radius: var-get($theme, 'date-range-border-radius');
23172363
}
23182364
}
23192365

23202366
%date-range-selected-last {
2367+
%date-inner {
2368+
border-start-start-radius: var-get($theme, 'date-border-radius');
2369+
border-end-start-radius: var-get($theme, 'date-border-radius');
2370+
}
2371+
23212372
&::before {
2322-
inset-inline-start: calc(50% - #{$border-size});
23232373
border-inline-start-color: transparent;
2374+
border-start-end-radius: var-get($theme, 'date-range-border-radius');
2375+
border-end-end-radius: var-get($theme, 'date-range-border-radius');
2376+
}
2377+
}
2378+
2379+
2380+
%date-first-preview {
2381+
%date-inner {
2382+
border-start-start-radius: var-get($theme, 'date-range-border-radius');
2383+
border-end-start-radius: var-get($theme, 'date-range-border-radius');
2384+
border-start-end-radius: 0;
2385+
border-end-end-radius: 0;
2386+
}
2387+
}
2388+
2389+
%date-last-preview {
2390+
%date-inner {
2391+
border-start-end-radius: var-get($theme, 'date-range-border-radius');
2392+
border-end-end-radius: var-get($theme, 'date-range-border-radius');
2393+
border-start-start-radius: 0;
2394+
border-end-start-radius: 0;
2395+
}
2396+
}
2397+
2398+
%date-first-last {
2399+
%date-inner {
2400+
border-radius: var-get($theme, 'date-range-border-radius');
23242401
}
23252402
}
23262403
}

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,10 @@
327327
margin-inline-start: auto;
328328
gap: rem(8px);
329329

330+
[igxIconButton] {
331+
color: var-get($theme, 'actions-text-color');
332+
}
333+
330334
&:empty {
331335
display: none;
332336
}
@@ -338,6 +342,10 @@
338342
order: 0;
339343
gap: rem(8px);
340344

345+
[igxIconButton] {
346+
color: var-get($theme, 'actions-text-color');
347+
}
348+
341349
&:empty {
342350
display: none;
343351
}

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,6 @@
425425
justify-content: center;
426426
border-radius: var-get($theme, 'item-border-radius');
427427
color: var-get($theme, 'item-text-color');
428-
background: var-get($theme, 'item-background');
429428

430429
@if $bootstrap-theme or $variant == 'fluent' {
431430
border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
@@ -436,9 +435,6 @@
436435
}
437436

438437
&:hover {
439-
color: var-get($theme, 'item-text-color-hover');
440-
background: var-get($theme, 'item-background-hover');
441-
442438
%igx-list__item-lines {
443439
color: currentColor;
444440
}
@@ -544,9 +540,15 @@
544540
align-items: center;
545541
position: relative;
546542
border-radius: var-get($theme, 'item-border-radius');
547-
background: inherit;
543+
background: var-get($theme, 'item-background');
548544
z-index: 2;
549545
gap: if($variant == 'indigo', rem(8px), rem(16px));
546+
547+
&:hover,
548+
&:focus-within {
549+
color: var-get($theme, 'item-text-color-hover');
550+
background: var-get($theme, 'item-background-hover');
551+
}
550552
}
551553

552554
%igx-list-header,

‎src/app/list/list.sample.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,17 @@
22
<section class="sample-content" [igSize]="properties.size">
33
<article class="sample-column">
44
<h5 class="sample-title">Angular List</h5>
5-
<igx-list>
5+
<igx-list [allowLeftPanning]="properties.enablePanning" [allowRightPanning]="properties.enablePanning">
6+
<ng-template igxListItemLeftPanning>
7+
<div class="pan pan--left">
8+
<igx-icon>delete</igx-icon>Delete
9+
</div>
10+
</ng-template>
11+
<ng-template igxListItemRightPanning>
12+
<div class="pan pan--right">
13+
<igx-icon>call</igx-icon>Dial
14+
</div>
15+
</ng-template>
616
<igx-list-item [isHeader]="true" selected>Employees List</igx-list-item>
717
@for (employee of employeeItems; track employee) {
818
<igx-list-item [selected]="employee.selected">

‎src/app/list/list.sample.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
.sample-title {
22
text-align: center;
33
}
4+
5+
.pan {
6+
display: flex;
7+
color: white;
8+
width: 100%;
9+
padding-left: 10px;
10+
align-items: center;
11+
}
12+
13+
.pan--left {
14+
flex-direction: row-reverse;
15+
background-color:orange;
16+
}
17+
18+
.pan--right {
19+
flex-direction: row;
20+
background-color:limegreen;
21+
}

‎src/app/list/list.sample.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import {
3030
PropertyChangeService,
3131
PropertyPanelConfig,
3232
} from '../properties-panel/property-change.service';
33+
import { HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
34+
import Hammer from 'hammerjs';
3335

3436
defineComponents(
3537
IgcListComponent,
@@ -79,15 +81,27 @@ interface Employee {
7981
IgxAvatarComponent,
8082
IgxButtonModule,
8183
IgxButtonDirective,
82-
IgSizeDirective
84+
IgSizeDirective,
85+
HammerModule
86+
],
87+
providers: [
88+
{
89+
provide: HAMMER_GESTURE_CONFIG,
90+
useClass: class {
91+
public overrides = {
92+
pan: { direction: Hammer.DIRECTION_HORIZONTAL }
93+
}
94+
}
95+
}
8396
]
8497
})
8598
export class ListSampleComponent {
8699
public panelConfig: PropertyPanelConfig = {
87100
size: {
88101
control: {
89102
type: 'button-group',
90-
options: ['small', 'medium', 'large']
103+
options: ['small', 'medium', 'large'],
104+
defaultValue: 'medium'
91105
}
92106
},
93107
hideTitle: {
@@ -145,6 +159,13 @@ export class ListSampleComponent {
145159
type: 'boolean',
146160
defaultValue: false
147161
}
162+
},
163+
enablePanning: {
164+
label: 'Item Panning',
165+
control: {
166+
type: 'boolean',
167+
defaultValue: false
168+
}
148169
}
149170
}
150171

0 commit comments

Comments
 (0)