Skip to content

Commit bebc71a

Browse files
dkamburovdkamburov
authored
Merge branch 'master' into mkirova/col-pin-directions
2 parents 76e46c6 + 8de2a92 commit bebc71a

File tree

10 files changed

+205
-65
lines changed

10 files changed

+205
-65
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -814,11 +814,9 @@
814814
%date-inner {
815815
color: var-get($theme, 'weekend-color');
816816

817-
@if $variant == 'indigo' {
818-
&:hover {
819-
color: var-get($theme, 'date-hover-foreground');
820-
}
821-
}
817+
&:hover {
818+
color: var-get($theme, 'date-hover-foreground');
819+
}
822820
}
823821
}
824822

‎projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -136,20 +136,6 @@
136136
}
137137

138138
@if $variant == 'bootstrap' {
139-
.igx-input-group--disabled {
140-
%igx-combo__toggle-button {
141-
border-inline-start-width: rem(1px);
142-
border-inline-start-style: solid;
143-
border-inline-start-color: inherit;
144-
}
145-
}
146-
147-
igx-suffix:not(.igx-combo__clear-button) + %igx-combo__toggle-button {
148-
border-inline-start-width: rem(1px);
149-
border-inline-start-style: solid;
150-
border-inline-start-color: inherit;
151-
}
152-
153139
.igx-input-group__bundle::after {
154140
height: rem(1px) !important;
155141
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -612,7 +612,7 @@
612612
%bootstrap-file-focused,
613613
%bootstrap-file-valid,
614614
%bootstrap-file-warning,
615-
%bootstrap-file-invalid,
615+
%bootstrap-file-invalid
616616
{
617617
%form-group-bundle {
618618
border-radius: var-get($theme, 'box-border-radius');
@@ -670,18 +670,42 @@
670670
%form-group-bundle {
671671
box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
672672
}
673+
674+
%form-group-prefix:not(:first-child) {
675+
border-inline-start-color: var-get($theme, 'success-secondary-color');
676+
}
677+
678+
%form-group-suffix:not(:last-child) {
679+
border-inline-end-color: var-get($theme, 'success-secondary-color');
680+
}
673681
}
674682

675683
%bootstrap-file-warning-focused {
676684
%form-group-bundle {
677685
box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
686+
687+
%form-group-prefix:not(:first-child) {
688+
border-inline-start-color: var-get($theme, 'warning-secondary-color');
689+
}
690+
691+
%form-group-suffix:not(:last-child) {
692+
border-inline-end-color: var-get($theme, 'warning-secondary-color');
693+
}
678694
}
679695
}
680696

681697
%bootstrap-file-invalid-focused {
682698
%form-group-bundle {
683699
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
684700
}
701+
702+
%form-group-prefix:not(:first-child) {
703+
border-inline-start-color: var-get($theme, 'error-secondary-color');
704+
}
705+
706+
%form-group-suffix:not(:last-child) {
707+
border-inline-end-color: var-get($theme, 'error-secondary-color');
708+
}
685709
}
686710

687711
@if $variant == 'bootstrap' {
@@ -691,6 +715,14 @@
691715
%upload-button {
692716
border-color: var-get($theme, 'focused-border-color');
693717
}
718+
719+
%form-group-prefix:not(:first-child) {
720+
border-inline-start-color: var-get($theme, 'focused-border-color');
721+
}
722+
723+
%form-group-suffix:not(:last-child) {
724+
border-inline-end-color: var-get($theme, 'focused-border-color');
725+
}
694726
}
695727
}
696728

@@ -2015,11 +2047,6 @@
20152047
};
20162048
}
20172049
}
2018-
2019-
.igx-input-group__clear-icon + igx-suffix,
2020-
.igx-input-group__clear-icon + [igxPrefix] {
2021-
border-inline-start: rem(1px) solid var-get($theme, 'border-color');
2022-
}
20232050
}
20242051

20252052
%form-group-display--bootstrap-suffixed-focused {
@@ -2284,6 +2311,24 @@
22842311
border-color: var-get($theme, 'disabled-border-color');
22852312
color: var-get($theme, 'disabled-text-color');
22862313
}
2314+
2315+
%form-group-prefix--disabled-bootstrap:not(:first-child) {
2316+
border-inline-start-color: var-get($theme, 'disabled-border-color');
2317+
}
2318+
2319+
%form-group-suffix--disabled-bootstrap:not(:last-child) {
2320+
border-inline-end-color: var-get($theme, 'disabled-border-color');
2321+
}
2322+
2323+
@if $variant == 'bootstrap' {
2324+
%form-group-prefix:not(:first-child) {
2325+
border-inline-start: rem(1px) solid var-get($theme, 'border-color');
2326+
}
2327+
2328+
%form-group-suffix:not(:last-child) {
2329+
border-inline-end: rem(1px) solid var-get($theme, 'border-color');
2330+
}
2331+
}
22872332
}
22882333

22892334
/// Adds typography styles for the igx-input-group component.

‎projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,6 @@
1313
display: block;
1414
}
1515

16-
@if $variant == 'bootstrap' {
17-
.igx-input-group--disabled {
18-
%igx-select__toggle-button {
19-
border-inline-start-width: rem(1px);
20-
border-inline-start-style: solid;
21-
border-inline-start-color: inherit;
22-
}
23-
}
24-
25-
igx-suffix + %igx-select__toggle-button {
26-
border-inline-start-width: rem(1px);
27-
border-inline-start-style: solid;
28-
border-inline-start-color: inherit;
29-
}
30-
}
31-
3216
.igx-input-group {
3317
%igx-select__toggle-button {
3418
background: var-get($theme, 'toggle-button-background');

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -968,8 +968,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
968968
*/
969969
public get minWidthPx() {
970970
const gridAvailableSize = this.grid.calcWidth;
971-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
972-
return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
971+
const minWidth = this.minWidth || this.defaultMinWidth;
972+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
973+
return isPercentageWidth ? parseFloat(minWidth) / 100 * gridAvailableSize : parseFloat(minWidth);
973974
}
974975

975976
/**
@@ -986,8 +987,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
986987
*/
987988
public get minWidthPercent() {
988989
const gridAvailableSize = this.grid.calcWidth;
989-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
990-
return isPercentageWidth ? parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
990+
const minWidth = this.minWidth || this.defaultMinWidth;
991+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
992+
return isPercentageWidth ? parseFloat(minWidth) : parseFloat(minWidth) / gridAvailableSize * 100;
991993
}
992994

993995

@@ -1015,7 +1017,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
10151017
this.grid.notifyChanges(true);
10161018
}
10171019
public get minWidth(): string {
1018-
return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
1020+
return this._defaultMinWidth;
10191021
}
10201022

10211023
/** @hidden @internal **/
@@ -2689,8 +2691,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
26892691
const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
26902692
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26912693
} else {
2692-
const currentCalcWidth = parseFloat(this.width);
2693-
this._calcWidth =this.getConstrainedSizePx(currentCalcWidth);
2694+
let possibleColumnWidth = '';
2695+
if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
2696+
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
2697+
} else {
2698+
possibleColumnWidth = this.width;
2699+
}
2700+
2701+
const currentCalcWidth = parseFloat(possibleColumnWidth);
2702+
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26942703
}
26952704
this.calcPixelWidth = parseFloat(this._calcWidth);
26962705
}

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 61 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,19 +295,63 @@ export interface RowType {
295295
*/
296296
unpin?: () => void;
297297
}
298-
298+
/**
299+
* Describes a field that can be used in the Grid and QueryBuilder components.
300+
*/
299301
export interface FieldType {
302+
/**
303+
* Display label for the field.
304+
*/
300305
label?: string;
306+
307+
/**
308+
* The internal field name, used in expressions and queries.
309+
*/
301310
field: string;
311+
312+
/**
313+
* Optional column header for UI display purposes.
314+
*/
302315
header?: string;
316+
317+
/**
318+
* The data type of the field.
319+
*/
303320
/* alternateType: GridColumnDataType */
304321
dataType: DataType;
322+
323+
/**
324+
* Options for the editor associated with this field.
325+
*/
305326
editorOptions?: IFieldEditorOptions;
327+
328+
/**
329+
* Optional filtering operands that apply to this field.
330+
*/
306331
filters?: IgxFilteringOperand;
332+
333+
/**
334+
* Optional arguments for any pipe applied to the field.
335+
*/
307336
pipeArgs?: IFieldPipeArgs;
337+
338+
/**
339+
* Default time format for Date/Time fields.
340+
*/
308341
defaultTimeFormat?: string;
342+
343+
/**
344+
* Default date/time format for Date/Time fields.
345+
*/
309346
defaultDateTimeFormat?: string;
310347

348+
/**
349+
* Optional formatter function to transform the value before display.
350+
*
351+
* @param value - The value of the field.
352+
* @param rowData - Optional row data that contains this field.
353+
* @returns The formatted value.
354+
*/
311355
formatter?(value: any, rowData?: any): any;
312356
}
313357

@@ -1160,7 +1204,7 @@ export interface GridType extends IGridDataBindable {
11601204
refreshSearch(): void;
11611205
getDefaultExpandState(record: any): boolean;
11621206
trackColumnChanges(index: number, column: any): any;
1163-
getPossibleColumnWidth(): string;
1207+
getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
11641208
resetHorizontalVirtualization(): void;
11651209
hasVerticalScroll(): boolean;
11661210
getVisibleContentHeight(): number;
@@ -1496,10 +1540,24 @@ export interface IClipboardOptions {
14961540
}
14971541

14981542
/**
1499-
* An interface describing entity
1543+
* Describes an entity in the QueryBuilder.
1544+
* An entity represents a logical grouping of fields and can have nested child entities.
15001545
*/
15011546
export interface EntityType {
1547+
/**
1548+
* The name of the entity.
1549+
* Typically used as an identifier in expressions.
1550+
*/
15021551
name: string;
1552+
1553+
/**
1554+
* The list of fields that belong to this entity.
1555+
*/
15031556
fields: FieldType[];
1557+
1558+
/**
1559+
* Optional child entities.
1560+
* This allows building hierarchical or nested query structures.
1561+
*/
15041562
childEntities?: EntityType[];
15051563
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5528,7 +5528,7 @@ export abstract class IgxGridBaseDirective implements GridType,
55285528
/**
55295529
* @hidden @internal
55305530
*/
5531-
public getPossibleColumnWidth(baseWidth: number = null) {
5531+
public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
55325532
let computedWidth;
55335533
if (baseWidth !== null) {
55345534
computedWidth = baseWidth;
@@ -5577,9 +5577,11 @@ export abstract class IgxGridBaseDirective implements GridType,
55775577
}
55785578
computedWidth -= this.featureColumnsWidth();
55795579

5580+
const minColWidth = minColumnWidth || this.minColumnWidth;
5581+
55805582
const columnWidth = !Number.isFinite(sumExistingWidths) ?
5581-
Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
5582-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
5583+
Math.max(computedWidth / columnsToSize, minColWidth) :
5584+
Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
55835585

55845586
return columnWidth + 'px';
55855587
}

‎projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
2929
GridFeaturesComponent,
3030
LargePinnedColGridComponent,
3131
NullColumnsComponent,
32+
MinWidthColumnsComponent,
3233
ColGridComponent,
3334
ColPercentageGridComponent
3435
]
@@ -902,6 +903,18 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
902903
expect(headers[headers.length - 1].nativeElement.innerText).toEqual("ReleaseDate");
903904
expect(firstRowCells.length).toEqual(11);
904905
}));
906+
907+
it('should use user-provided `minWidth` as default min column width to size columns - #16057.', fakeAsync(() => {
908+
const fixture = TestBed.createComponent(MinWidthColumnsComponent);
909+
fixture.detectChanges();
910+
911+
const grid = fixture.componentInstance.grid;
912+
913+
expect(grid.columnList.get(0).width).toEqual('130px');
914+
expect(grid.columnList.get(1).width).toEqual('90px');
915+
expect(grid.columnList.get(2).width).toEqual('90px');
916+
expect(grid.columnList.get(3).width).toEqual('90px');
917+
}));
905918
});
906919

907920
describe('Resizer tests: ', () => {
@@ -1060,6 +1073,23 @@ export class NullColumnsComponent implements OnInit {
10601073
}
10611074
}
10621075

1076+
@Component({
1077+
template: GridTemplateStrings.declareGrid(`width="400px" height="200px"`, ``, `<igx-column [field]="'ID'" [width]="'130px'" [resizable]="true"></igx-column>
1078+
<igx-column [field]="'CompanyName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
1079+
<igx-column [field]="'ContactName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
1080+
<igx-column [field]="'ContactTitle'" [minWidth]="'50px'" [resizable]="true"></igx-column>`),
1081+
imports: [IgxGridComponent, IgxColumnComponent]
1082+
})
1083+
export class MinWidthColumnsComponent implements OnInit {
1084+
@ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
1085+
1086+
public data = [];
1087+
1088+
public ngOnInit(): void {
1089+
this.data = SampleTestData.contactInfoData();
1090+
}
1091+
}
1092+
10631093
@Component({
10641094
template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, `<igx-column [field]="'Items'" [width]="'40px'" dataType="string" [filterable]="true"></igx-column>
10651095
<igx-column [field]="'ID'" [width]="'50px'" [header]="'ID'" [filterable]="true"></igx-column>

0 commit comments

Comments
 (0)