Skip to content

Commit e057b8e

Browse files
desig9steindesig9stein
committed
fix(input-group): fix broken input group after the merge conflict
1 parent 4e89eb9 commit e057b8e

File tree

6 files changed

+54
-116
lines changed

6 files changed

+54
-116
lines changed

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
131131
{ provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
132132
{ provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
133133
],
134-
imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
134+
imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
135135
})
136136
export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { }
137137

@@ -166,7 +166,7 @@ export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent
166166
{ provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
167167
{ provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
168168
],
169-
imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
169+
imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
170170
})
171171
export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { }
172172

‎projects/igniteui-angular/src/lib/input-group/input-group.component.html‎

Lines changed: 37 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,18 @@
1-
@if (isTypeBox) {
2-
<div class="igx-input-group__wrapper">
3-
<ng-container *ngTemplateOutlet="bundle"></ng-container>
4-
</div>
5-
} @else {
6-
<ng-container *ngTemplateOutlet="bundle"></ng-container>
7-
}
8-
9-
<div class="igx-input-group__hint" (click)="hintClickHandler($event)">
10-
<ng-content select="igx-hint, [igxHint]"></ng-content>
11-
</div>
1+
<ng-container *ngTemplateOutlet="bundle"></ng-container>
122

133
<ng-template #label>
144
<ng-content select="[igxLabel]"></ng-content>
155
</ng-template>
166

17-
<ng-template #input>
18-
<ng-content select="[igxInput]"></ng-content>
19-
</ng-template>
20-
21-
<ng-template #prefix>
22-
<ng-content select="igx-prefix, [igxPrefix]"></ng-content>
23-
</ng-template>
24-
25-
<!-- Dummy usage to satisfy Angular compiler -->
26-
<ng-template #dummy><span igxPrefix hidden></span></ng-template>
27-
287
<ng-template #uploadButton>
298
@if (isFileType) {
30-
<div class="igx-input-group__upload-button igx-file-input__upload-button-wrapper">
9+
<div class="igx-input-group__upload">
3110
<button
32-
igxButton="flat"
33-
type="button"
34-
tabindex="-1"
35-
[disabled]="disabled"
36-
class="igx-file-input__upload-button"
11+
igxButton
12+
type="button"
13+
class="igx-input-group__upload-button"
14+
[disabled]="disabled"
15+
tabindex="-1"
3716
>
3817
{{ resourceStrings.igx_input_upload_button }}
3918
</button>
@@ -44,7 +23,7 @@
4423
<ng-template #files>
4524
@if (isFileType) {
4625
<div
47-
class="igx-input-group__file-input igx-file-input__file-names"
26+
class="igx-input-group__file-input"
4827
[title]="fileNames"
4928
>
5029
<span>{{ fileNames }}</span>
@@ -55,110 +34,60 @@
5534
<ng-template #clear>
5635
@if (isFileType && isFilled) {
5736
<igx-suffix
58-
class="igx-input-group__clear-icon igx-file-input__clear-icon"
59-
(click)="clearValueHandler()"
60-
(keydown.Enter)="clearValueHandler()"
61-
title="clear files"
62-
tabindex="0"
37+
class="igx-input-group__clear-icon"
38+
(click)="clearValueHandler()"
39+
(keydown.Enter)="clearValueHandler()"
40+
title="clear files"
41+
tabindex="0"
6342
>
6443
<igx-icon family="default" name="input_clear"></igx-icon>
6544
</igx-suffix>
6645
}
6746
</ng-template>
6847

69-
<ng-template #suffix>
70-
<ng-content select="igx-suffix, [igxSuffix]"></ng-content>
71-
</ng-template>
48+
<ng-template #bundle>
49+
@if (!isTypeBorder) {
50+
<ng-container *ngTemplateOutlet="label"></ng-container>
51+
}
7252

73-
<ng-template #materialBundle>
7453
<div class="igx-input-group__bundle">
7554
<div class="igx-input-group__bundle-start">
76-
<ng-container *ngTemplateOutlet="prefix"></ng-container>
55+
<ng-content select="igx-prefix, [igxPrefix]"></ng-content>
7756
</div>
7857

79-
<ng-container>
58+
@if (isFileType) {
59+
<ng-container *ngTemplateOutlet="uploadButton"></ng-container>
60+
}
61+
62+
@if (isTypeBorder) {
8063
<div class="igx-input-group__notch">
8164
<ng-container *ngTemplateOutlet="label"></ng-container>
8265
</div>
83-
</ng-container>
84-
85-
<div class="igx-input-group__bundle-main">
86-
<ng-container *ngTemplateOutlet="input"></ng-container>
87-
<ng-container *ngTemplateOutlet="uploadButton"></ng-container>
88-
<ng-container *ngTemplateOutlet="files"></ng-container>
89-
</div>
90-
91-
<div class="igx-input-group__filler"></div>
92-
93-
<div class="igx-input-group__bundle-end">
94-
<ng-container *ngTemplateOutlet="clear"></ng-container>
95-
<ng-container *ngTemplateOutlet="suffix"></ng-container>
96-
</div>
97-
98-
@if (hasBorder) {
99-
<div class="igx-input-group__line"></div>
10066
}
101-
</div>
102-
</ng-template>
103-
104-
<ng-template #fluentBundle>
105-
<ng-container *ngTemplateOutlet="label"></ng-container>
106-
107-
<div class="igx-input-group__bundle">
108-
<div class="igx-input-group__bundle-start">
109-
<ng-container *ngTemplateOutlet="prefix"></ng-container>
110-
</div>
111-
11267

11368
<div class="igx-input-group__bundle-main">
114-
<ng-container *ngTemplateOutlet="input"></ng-container>
115-
<ng-container *ngTemplateOutlet="uploadButton"></ng-container>
116-
<ng-container *ngTemplateOutlet="files"></ng-container>
117-
</div>
69+
<ng-content select="[igxInput]"></ng-content>
11870

119-
<div class="igx-input-group__bundle-end">
120-
<ng-container *ngTemplateOutlet="clear"></ng-container>
121-
<ng-container *ngTemplateOutlet="suffix"></ng-container>
71+
@if (isFileType) {
72+
<ng-container *ngTemplateOutlet="files"></ng-container>
73+
}
12274
</div>
12375

124-
@if (hasBorder) {
125-
<div class="igx-input-group__line"></div>
76+
@if (isTypeBorder) {
77+
<div class="igx-input-group__filler"></div>
12678
}
127-
</div>
128-
</ng-template>
12979

130-
<ng-template #bootstrapBundle>
131-
<ng-container *ngTemplateOutlet="label"></ng-container>
80+
<div class="igx-input-group__bundle-end">
81+
@if (isFileType && isFilled) {
82+
<ng-container *ngTemplateOutlet="clear"></ng-container>
13283

133-
<div class="igx-input-group__bundle">
134-
<div class="igx-input-group__bundle-start">
135-
<ng-container *ngTemplateOutlet="prefix"></ng-container>
84+
}
85+
<ng-content select="igx-suffix, [igxSuffix]"></ng-content>
13686
</div>
87+
</div>
13788

138-
<ng-container *ngTemplateOutlet="input"></ng-container>
139-
<ng-container *ngTemplateOutlet="uploadButton"></ng-container>
140-
<ng-container *ngTemplateOutlet="files"></ng-container>
14189

142-
<div class="igx-input-group__bundle-end">
143-
<ng-container *ngTemplateOutlet="clear"></ng-container>
144-
<ng-container *ngTemplateOutlet="suffix"></ng-container>
145-
</div>
90+
<div class="igx-input-group__hint" (click)="hintClickHandler($event)">
91+
<ng-content select="igx-hint, [igxHint]"></ng-content>
14692
</div>
14793
</ng-template>
148-
149-
<ng-template #bundle>
150-
@switch (theme) {
151-
@case ('bootstrap') {
152-
<ng-container *ngTemplateOutlet="bootstrapBundle"></ng-container>
153-
}
154-
@case ('fluent') {
155-
<ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
156-
}
157-
@case ('indigo') {
158-
<ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
159-
}
160-
@default {
161-
<ng-container *ngTemplateOutlet="materialBundle"></ng-container>
162-
}
163-
}
164-
</ng-template>

‎projects/igniteui-angular/src/lib/input-group/input-group.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
4040
styleUrl: 'input-group.component.css',
4141
encapsulation: ViewEncapsulation.None,
4242
providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }],
43-
imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
43+
imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
4444
})
4545
export class IgxInputGroupComponent implements IgxInputGroupBase {
4646
/**

‎projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ $input-bottom-spacing: rem(6px);
345345
grid-area: 1 / 2 / span 1 / span 3;
346346
padding-inline-end: 0;
347347
}
348-
348+
349349
@include e(textarea) {
350350
padding-inline-end: rem(4px);
351351
}
@@ -799,6 +799,12 @@ $input-bottom-spacing: rem(6px);
799799
}
800800
}
801801

802+
@include mx(border, invalid, filled) {
803+
@include e(notch) {
804+
border-block-start-color: transparent;
805+
}
806+
}
807+
802808
@include m(file, $not: (border)) {
803809
@include e(label) {
804810
@extend %box-floating-label;

‎src/app/combo-showcase/combo-showcase.sample.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ <h1 class="combo-sample__title">
66
<form class="combo-sample__form" [igSize]="properties.size">
77
<div class="combo-sample__row combo-sample__row--stretch">
88
<igx-combo
9+
name="angularCombo"
910
[showSearchCaseIcon]="properties.caseSensitiveIcon"
1011
[disableFiltering]="properties.disableFiltering"
1112
[groupSortingDirection]="groupSortingAngular"
@@ -16,7 +17,8 @@ <h1 class="combo-sample__title">
1617
[displayKey]="valueKeyVar"
1718
[valueKey]="valueKeyVar"
1819
[groupKey]="valueKeyVar ? 'region' : ''"
19-
>
20+
[(ngModel)]="angularComboVal"
21+
[required]="properties.required">
2022
<label igxLabel>Angular Combo</label>
2123
<igx-hint>Select a unique falsy value</igx-hint>
2224
</igx-combo>
@@ -29,8 +31,7 @@ <h1 class="combo-sample__title">
2931
[groupSorting]="properties.groupSorting"
3032
[placeholder]="properties.placeholder"
3133
[placeholderSearch]="properties.placeholderSearch"
32-
outlined="true"
33-
[disabled]="properties.disabled"
34+
outlined
3435
label="WC Combo"
3536
[data]="items"
3637
[displayKey]="valueKeyVar"

‎src/app/combo-showcase/combo-showcase.sample.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef } from '@angular/core';
2-
import { FormsModule } from '@angular/forms';
2+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
33
import {
44
IGX_COMBO_DIRECTIVES,
55
IgxHintDirective,
@@ -19,6 +19,7 @@ defineComponents(IgcComboComponent);
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
imports: [
2121
FormsModule,
22+
ReactiveFormsModule,
2223
IgxLabelDirective,
2324
IgxHintDirective,
2425
IGX_COMBO_DIRECTIVES,
@@ -28,6 +29,7 @@ defineComponents(IgcComboComponent);
2829
export class ComboShowcaseSampleComponent {
2930
protected items: any[] = [];
3031
public valueKeyVar = 'field';
32+
public angularComboVal: any[] = [];
3133

3234
public panelConfig: PropertyPanelConfig = {
3335
size: {

0 commit comments

Comments
 (0)