- ,
+ time: FormControl,
+ email: FormControl,
+ fullName: FormControl,
+ movie: FormControl,
+ phone: FormControl,
+ rating: FormControl,
+ checkbox: FormControl,
+ radio: FormControl,
+ switch: FormControl,
+ range: FormControl,
+ slider: FormControl
+ calendar: FormControl
+ month: FormControl
+ genres: FormControl
+}
@Component({
selector: 'app-reactive-form',
styleUrls: ['./reactive-forms.component.scss'],
@@ -8,31 +27,36 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
})
export class ReactiveFormsSampleComponent {
public genres = [];
- public user: FormGroup;
public minTime = '06:15:30';
public maxTime = '09:15:30';
+ public minValue = '0';
+ public maxValue = '100';
public minDate = new Date();
public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
+ public user: FormGroup;
-
- constructor(fb: FormBuilder) {
- this.user = fb.group({
- date: ['', Validators.required],
- time: ['', Validators.required],
- email: ['', Validators.required],
- fullName: ['', Validators.required],
- genres: [''],
- movie: ['', Validators.required],
- phone: ['']
+ constructor() {
+ this.user = new FormGroup({
+ date: new FormControl('', Validators.required),
+ time: new FormControl('', Validators.required),
+ email: new FormControl('', [Validators.required, Validators.email]),
+ fullName: new FormControl('', [Validators.required, Validators.pattern(/^[\p{L}\p{M}'\- ]+$/u)]),
+ movie: new FormControl('', Validators.required),
+ phone: new FormControl(null,Validators.required),
+ rating: new FormControl(2, Validators.required),
+ checkbox: new FormControl(true,Validators.required),
+ radio: new FormControl(''),
+ switch: new FormControl(false),
+ range: new FormControl({ start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5))}),
+ slider: new FormControl({lower: 5, upper: 30}),
+ calendar: new FormControl(null),
+ month: new FormControl(null),
+ genres: new FormControl(['Action','Adventure','Comedy'])
});
-
this.genres = [
{ type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
{ type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
- {
- type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri',
- 'Untouchable', '3 idiots']
- },
+ {type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri','Untouchable', '3 idiots']},
{ type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
{ type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
{ type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
@@ -43,8 +67,30 @@ export class ReactiveFormsSampleComponent {
{ type: 'Thriller', movies: ['The Usual Suspects'] },
{ type: 'Western', movies: ['Django Unchained'] }
];
+
+ }
+
+ public get email() {
+ return this.user.get('email');
+ }
+ public get phone() {
+ return this.user.get('phone');
+ }
+ public get fullName() {
+ return this.user.get('fullName');
}
+public valueChangeHandler() {
+ var sliderValue = this.user.get('slider');
+ this.user.controls.range.setValue({
+ start: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.lower)),
+ end: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.upper))
+ });
+
+ var pickerDate = this.user.controls.range.value.start;
+ this.user.controls.calendar.setValue(pickerDate);
+ this.user.controls.month.setValue(pickerDate);
+}
public onSubmit() {
console.log(this.user);
}
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index a4c0382672..3a5aec6be1 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -34,6 +34,7 @@ export const layoutsRoutesData = {
'splitter-nested-sample': { displayName: 'Splitter Nested Panes', parentName: 'Splitter' },
'splitter-styling-sample': { displayName: 'Splitter Styling', parentName: 'Splitter' },
'stepper-overview-sample': { displayName: 'Stepper Overview', parentName: 'Stepper' },
+ 'stepper-sample-reactive-forms': { displayName: 'Stepper Reactive Forms', parentName: 'Stepper' },
'stepper-label-position-and-orientation-sample': { displayName: 'Stepper Label Position And Orientation', parentName: 'Stepper' },
'stepper-linear-sample': { displayName: 'Linear Stepper', parentName: 'Stepper' },
'stepper-steptypes-sample': { displayName: 'Stepper Step Types', parentName: 'Stepper' },
diff --git a/src/app/layouts/layouts-routing.module.ts b/src/app/layouts/layouts-routing.module.ts
index a8d203d039..530d33b6fb 100644
--- a/src/app/layouts/layouts-routing.module.ts
+++ b/src/app/layouts/layouts-routing.module.ts
@@ -69,13 +69,13 @@ import { View3Component } from './tabs/views/view3/view3.component';
import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component';
import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component';
-import {
- StepperLabelPositionAndOrientationSampleComponent
+import {StepperLabelPositionAndOrientationSampleComponent
} from './stepper/stepper-label-position-and-orientation-sample/stepper-label-position-and-orientation-sample.component';
import { StepperLinearSampleComponent } from './stepper/stepper-linear-sample/stepper-linear-sample.component';
import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sample/stepper-steptypes-sample.component';
import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
+import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component';
export const layoutsRoutes: Routes = [
{
@@ -273,6 +273,11 @@ export const layoutsRoutes: Routes = [
data: layoutsRoutesData['stepper-overview-sample'],
path: 'stepper-overview-sample'
},
+ {
+ component: StepperSampleReactiveFormsComponent,
+ data: layoutsRoutesData['stepper-sample-reactive-forms'],
+ path: 'stepper-sample-reactive-forms'
+ },
{
component: StepperStepTypesSampleComponent,
data: layoutsRoutesData['stepper-steptypes-sample'],
diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index 79ddcebed4..8a0343b866 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
IgxAccordionModule,
IgxAvatarModule,
@@ -32,12 +32,15 @@ import {
IgxTimePickerModule,
IgxToastModule
} from 'igniteui-angular';
+import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
+import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component';
+import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component';
+import { AvatarCSSVariablesComponent } from './avatar/avatar-css-variables/avatar-css-variables.component';
import { AvatarSample1Component } from './avatar/avatar-sample-1/avatar-sample-1.component';
import { AvatarSample2Component } from './avatar/avatar-sample-2/avatar-sample-2.component';
import { AvatarSample3Component } from './avatar/avatar-sample-3/avatar-sample-3.component';
import { AvatarSample4Component } from './avatar/avatar-sample-4/avatar-sample-4.component';
import { AvatarStylingSampleComponent } from './avatar/avatar-styling/avatar-styling.component';
-import { AvatarCSSVariablesComponent } from './avatar/avatar-css-variables/avatar-css-variables.component';
import { CardSample1Component } from './card/card-sample-1/card-sample-1.component';
import { CardSample2Component } from './card/card-sample-2/card-sample-2.component';
import { CardSample3Component } from './card/card-sample-3/card-sample-3.component';
@@ -80,27 +83,25 @@ import {
} from './splitter/splitter-horizontal-sample/splitter-horizontal-sample.component';
import { SplitterNestedSampleComponent } from './splitter/splitter-nested-sample/splitter-nested-sample.component';
import { SplitterStylingSampleComponent } from './splitter/splitter-styling-sample/splitter-styling-sample.component';
+import {
+ StepperLabelPositionAndOrientationSampleComponent
+} from './stepper/stepper-label-position-and-orientation-sample/stepper-label-position-and-orientation-sample.component';
+import { StepperLinearSampleComponent } from './stepper/stepper-linear-sample/stepper-linear-sample.component';
+import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
+import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component';
+import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sample/stepper-steptypes-sample.component';
+import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
import { TabbarSample1Component } from './tabbar/tabbar-sample-1/tabbar-sample-1.component';
import { TabbarSample2Component } from './tabbar/tabbar-sample-2/tabbar-sample-2.component';
import { TabbarSample3Component } from './tabbar/tabbar-sample-3/components/tabbar-sample-3.component';
import { TabbarStyleComponent } from './tabbar/tabbar-style/tabbar-style.component';
+import { TabsAlignmentComponent } from './tabs/tabs-alignment/tabs-alignment.component';
+import { TabsHeaderPrefixSuffixComponent } from './tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix';
import { TabsSample1Component } from './tabs/tabs-sample-1/tabs-sample-1.component';
import { TabsSample2Component } from './tabs/tabs-sample-2/tabs-sample-2.component';
import { TabsSample3Component } from './tabs/tabs-sample-3/tabs-sample-3.component';
import { TabsSample4Component } from './tabs/tabs-sample-4/components/tabs-sample-4.component';
import { TabsStyleComponent } from './tabs/tabs-style/tabs-style.component';
-import { TabsAlignmentComponent } from './tabs/tabs-alignment/tabs-alignment.component';
-import { TabsHeaderPrefixSuffixComponent } from './tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix';
-import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
-import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component';
-import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component';
-import {
- StepperLabelPositionAndOrientationSampleComponent
-} from './stepper/stepper-label-position-and-orientation-sample/stepper-label-position-and-orientation-sample.component';
-import { StepperLinearSampleComponent } from './stepper/stepper-linear-sample/stepper-linear-sample.component';
-import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sample/stepper-steptypes-sample.component';
-import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
-import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
@NgModule({
declarations: [
@@ -148,6 +149,7 @@ import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sampl
StepperLabelPositionAndOrientationSampleComponent,
StepperLinearSampleComponent,
StepperOverviewSampleComponent,
+ StepperSampleReactiveFormsComponent,
StepperStepTypesSampleComponent,
StepperStylingSampleComponent,
TabbarSample1Component,
@@ -168,7 +170,8 @@ import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sampl
],
imports: [
CommonModule,
- FormsModule,
+ FormsModule,
+ ReactiveFormsModule ,
LayoutsRoutingModule,
IgxAccordionModule,
IgxAvatarModule,
diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html
new file mode 100644
index 0000000000..93b5c89c8c
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.html
@@ -0,0 +1,262 @@
+
+
+
+ Card Type
+
+
+
+ Business information
+
+
+
+ Personal Information
+
+
+
+ Shipping Details
+
+
+
+ Confirmation
+
+
+
diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss
new file mode 100644
index 0000000000..355981ca49
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss
@@ -0,0 +1,233 @@
+@use '../../../../variables' as *;
+
+$sample-gap: 20px;
+:host {
+ display: block;
+ padding: $sample-gap;
+ max-width: rem(1150px);
+
+ p {
+ margin: 0;
+ }
+}
+
+.sample-step-actions,
+.card-wrapper,
+.sample-row,
+.flex-form,
+.form-row,
+.success-message,
+.success-text {
+ display: flex;
+}
+
+.sample-row {
+ align-items: flex-start;
+ gap: rem(50px);
+
+ > * {
+ flex: 1;
+ }
+}
+
+.sample-step-actions {
+ gap: $sample-gap;
+ margin-top: $sample-gap * 2;
+}
+
+.card-wrapper {
+ gap: rem(30px);
+}
+
+$my-card: card-theme(
+ $schema: $light-schema,
+ $border-radius: rem(8px),
+ $content-text-color: color($default-palette, 'gray', 900),
+);
+
+@include card($my-card);
+
+.selected-card {
+ border: 2px solid color($default-palette, 'primary', 400);
+ position: relative;
+ overflow: initial;
+
+ igx-badge {
+ position: absolute;
+ top: rem(-11px);
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ content: 'Current choice';
+ padding: rem(4px) rem(8px);
+ max-width: 50%;
+ }
+}
+
+.igx-card {
+ cursor: pointer;
+ user-select: none;
+ min-width: 280px;
+
+ &:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 1px color($default-palette, 'primary', 400),
+ 0 5px 5px -3px rgba(0, 0, 0, 0.26),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.12),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.08);
+ }
+}
+
+.sample-step-title {
+ font-size: rem(20px);
+ letter-spacing: 0;
+ font-weight: 500;
+ line-height: normal;
+ margin-bottom: rem(24px);
+}
+
+.igx-card__media {
+ max-width: rem(340px);
+ padding: rem(30px) rem(30px) 0 rem(30px);
+}
+
+.igx-card-content {
+ text-align: center;
+
+ p {
+ font-size: rem(16px);
+ line-height: rem(24px);
+ }
+
+ padding: rem(30px);
+}
+
+.card-title {
+ display: block;
+ font-size: rem(14px);
+ font-weight: 500;
+ margin: 0 rem(8px);
+ color: color($default-palette, 'secondary');
+}
+
+.card-currency {
+ display: block;
+ font-size: rem(48px);
+ color: color($default-palette, 'secondary');
+ margin-bottom: rem(8px);
+
+ &::before {
+ content: '$';
+ font-size: rem(34px);
+ margin-right: rem(6px);
+ position: relative;
+ top: rem(-12px);
+ }
+}
+
+.flex-form,
+.form-row {
+ gap: rem(16px);
+}
+
+.flex-form {
+ flex-direction: column;
+
+ igx-checkbox {
+ white-space: nowrap;
+ }
+}
+
+.sample-card {
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ img {
+ width: rem(180px);
+ max-width: rem(300px);
+ min-width: rem(130px);
+ }
+
+ .card-title {
+ font-size: 12px;
+ margin:0 rem(4px);
+ }
+
+ .card-currency {
+ font-size: rem(36px);
+ margin-bottom: rem(4px);
+
+ &::before {
+ font-size: rem(22px);
+ margin-right: rem(4px);
+ }
+ }
+
+ p {
+ font-size: rem(14px);
+ white-space: nowrap;
+ }
+}
+
+.radio-sample {
+ margin-bottom: rem(16px);
+}
+
+.success-marker {
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ width: rem(30px);
+ height: rem(30px);
+ border-radius: rem(15px);
+ background: color($default-palette, 'success');
+ color: #fff;
+ user-select: none;
+}
+
+.success-message {
+ align-items: center;
+ gap: rem(16px);
+ margin-bottom: rem(32px);
+}
+
+.success-text {
+ flex-direction: column;
+
+ .sample-step-title {
+ margin: 0;
+ }
+}
+
+.sample-date {
+ display: block;
+ margin-bottom: rem(16px);
+ text-align: left;
+ font-weight: 500;
+}
+
+.sample-small-card {
+ max-width: rem(500px);
+}
+
+.sample-terms {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ > a {
+ margin-left: rem(8px);
+ color: color($default-palette, 'primary');
+ text-decoration: none;
+
+ &:hover {
+ color: color($default-palette, 'primary', 600);
+ }
+ }
+}
+
+.sample-required {
+ color: color($default-palette, 'error');
+ margin-left: rem(2px);
+}
diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts
new file mode 100644
index 0000000000..1fa5424e41
--- /dev/null
+++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.ts
@@ -0,0 +1,146 @@
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { IgxStepperComponent } from 'igniteui-angular';
+
+export interface BusinessInformation{
+ name: FormControl,
+ physicalAddress: FormControl,
+ city: FormControl,
+ state: FormControl,
+ zip: FormControl,
+ taxIdNumber: FormControl,
+ differentAddress: FormControl,
+ nonUSBusinessActivity: FormControl
+}
+
+export interface PersonalInformation{
+ firstName: FormControl,
+ lastName: FormControl,
+ jobTitle: FormControl,
+ phoneNumber: FormControl,
+ email: FormControl,
+ authorization: FormControl,
+ agreementAccepted: FormControl
+}
+
+export interface ShippingDetails{
+ sfirstName: FormControl,
+ slastName: FormControl,
+ smailingAddress: FormControl,
+ scity: FormControl,
+ sstate: FormControl,
+ szip: FormControl
+}
+
+@Component({
+ selector: 'app-stepper-sample-reactive-forms',
+ styleUrls: ['./stepper-sample-reactive-forms.component.scss'],
+ templateUrl: './stepper-sample-reactive-forms.component.html'
+})
+export class StepperSampleReactiveFormsComponent {
+ @ViewChild('stepper', { static: true })
+ public stepper: IgxStepperComponent;
+
+ public today: Date = new Date();
+
+ public cards: any[] = [
+ {
+ img: 'assets/images/stepper/card-gold.png',
+ price: 400,
+ offer: 'STATEMENT CREDIT OFFER',
+ type: 'Business Customized Advanced',
+ description: 'Cash Mastercard'
+ },
+ {
+ img: 'assets/images/stepper/card-red.png',
+ price: 600,
+ offer: 'STATEMENT CREDIT OFFER',
+ type: 'Business Travel Advanced',
+ description: 'World Mastercard'
+ },
+ {
+ img: 'assets/images/stepper/card-blue.png',
+ price: 500,
+ offer: 'STATEMENT CREDIT OFFER',
+ type: 'Business Golden',
+ description: 'World Mastercard'
+ }
+ ];
+
+ public states: string[] = [
+ 'Alabama', 'Arizona', 'California', 'Colorado', 'Florida',
+ 'Georgia', 'Hawaii', 'Illinois', 'Louisiana', 'Minnesota',
+ 'Nevada', 'New York', 'New Jersey', 'Ohio', 'Texas', 'Virginia', 'Washington'
+ ];
+ public selectedCard: any;
+
+ public businessInformation:FormGroup;
+ public personalInformation:FormGroup;
+ public shippingDetails:FormGroup;
+
+ constructor(private cdr: ChangeDetectorRef) {
+ this.businessInformation = new FormGroup({
+ name: new FormControl('', Validators.required),
+ physicalAddress: new FormControl('', Validators.required),
+ city: new FormControl('', Validators.required),
+ state: new FormControl(this.states, Validators.required),
+ zip: new FormControl(null, [Validators.required, Validators.pattern("[0-9]{5}")]),
+ taxIdNumber: new FormControl(null, [Validators.required,Validators.pattern("[9]{1}[0-9]{8}")]),
+ differentAddress: new FormControl(false, Validators.required),
+ nonUSBusinessActivity: new FormControl(null, Validators.required)
+ })
+
+ this.personalInformation = new FormGroup({
+ firstName: new FormControl('', Validators.required),
+ lastName: new FormControl('', Validators.required),
+ jobTitle: new FormControl('', Validators.required),
+ phoneNumber: new FormControl(null, Validators.required),
+ email: new FormControl('', Validators.required),
+ authorization: new FormControl(false, Validators.requiredTrue),
+ agreementAccepted: new FormControl(false, Validators.requiredTrue)
+ })
+
+ this.shippingDetails = new FormGroup({
+ sfirstName: new FormControl('', Validators.required),
+ slastName: new FormControl('', Validators.required),
+ smailingAddress: new FormControl('', Validators.required),
+ scity: new FormControl('', Validators.required),
+ sstate: new FormControl(this.states, Validators.required),
+ szip: new FormControl(null, [Validators.required, Validators.pattern("[0-9]{5}")])
+ })
+ };
+
+
+ public selectCard(card: any): void {
+ this.selectedCard = card;
+ this.cdr.detectChanges();
+ this.stepper.next();
+ }
+
+ public resetStepper(form1: FormGroup, form2: FormGroup, form3: FormGroup): void {
+ this.stepper.reset();
+ this.selectedCard = null;
+ form1.reset();
+ this.businessInformation.controls.differentAddress.setValue(false);
+ form2.reset();
+ this.personalInformation.controls.authorization.setValue(false);
+ this.personalInformation.controls.agreementAccepted.setValue(false);
+ form3.reset();
+ }
+
+ public handleKeyDown(evt: KeyboardEvent, card: any): void {
+ if (evt.key.toLowerCase() === ' ' || evt.key.toLowerCase() === 'spacebar' || evt.key.toLowerCase() === 'space') {
+ this.selectCard(card);
+ }
+ }
+
+ public errorMessages(){
+ if(this.businessInformation.controls.taxIdNumber.errors.required){
+ return "This field is required"
+ }
+
+ if(this.businessInformation.controls.taxIdNumber.errors.pattern){
+ return "The Federal Tax ID Number should begin with 9 and should have 9 digits"
+ }
+ }
+}
diff --git a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
index 3b2f6931be..30a4b63304 100644
--- a/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
+++ b/src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
@@ -24,7 +24,7 @@ igx-bottom-nav-content {
$dark-bottom-nav: bottom-nav-theme(
$background: #292826,
- $active-item-color: #F4D45C
+ $icon-selected-color: #F4D45C
);
// :host {
diff --git a/src/app/lists/combo/combo-features/combo-features.component.html b/src/app/lists/combo/combo-features/combo-features.component.html
index 0ca44cb47b..4413175416 100644
--- a/src/app/lists/combo/combo-features/combo-features.component.html
+++ b/src/app/lists/combo/combo-features/combo-features.component.html
@@ -1,7 +1,7 @@
diff --git a/src/app/lists/combo/combo-remote/combo-remote.component.html b/src/app/lists/combo/combo-remote/combo-remote.component.html
index d984a04445..d333189486 100644
--- a/src/app/lists/combo/combo-remote/combo-remote.component.html
+++ b/src/app/lists/combo/combo-remote/combo-remote.component.html
@@ -9,7 +9,6 @@
(selectionChanging)="handleSelectionChanging($event)"
(closing)="onClosing()" (opened)="onOpened()"
(closed)="onClosed()"
- placeholder="Location(s)"
- [filterable]="true">
+ placeholder="Location(s)">
diff --git a/src/app/lists/lists.module.ts b/src/app/lists/lists.module.ts
index e901c08d06..2d55e8a644 100644
--- a/src/app/lists/lists.module.ts
+++ b/src/app/lists/lists.module.ts
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
@@ -51,8 +51,7 @@ import { SimpleComboStylingComponent } from './combo/simple-combo-styling/simple
import { ListItemSelectionComponent } from './list/list-item-selection/list-item-selection.component';
import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-combo-remote.component';
-@NgModule({
- declarations: [
+@NgModule({ declarations: [
ListComponent,
ListSample1Component,
ListSample2Component,
@@ -79,9 +78,7 @@ import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-c
TreeAdvancedSampleComponent,
ListItemSelectionComponent,
SimpleComboRemoteComponent
- ],
- imports: [
- CommonModule,
+ ], imports: [CommonModule,
FormsModule,
ListsRoutingModule,
IgxAvatarModule,
@@ -95,7 +92,6 @@ import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-c
IgxSwitchModule,
IgxToastModule,
IgxButtonGroupModule,
- HttpClientModule,
IgxRippleModule,
IgxCardModule,
IgxTreeModule,
@@ -103,7 +99,5 @@ import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-c
IgxFinancialChartModule,
IgxSimpleComboModule,
IgxProgressBarModule,
- IgxIconButtonDirective
- ]
-})
+ IgxIconButtonDirective], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class ListsModule { }
diff --git a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
index 0be22f2bcc..328c921bf5 100644
--- a/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
+++ b/src/app/menus/action-strip/action-strip-paragraph-styling/action-strip-paragraph-styling.component.ts
@@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core';
-import { DisplayDensity, IgxActionStripComponent } from 'igniteui-angular';
+import { IgxActionStripComponent } from 'igniteui-angular';
@Component({
selector: 'app-action-strip-paragraph-styling',
diff --git a/src/app/pagination/pagination.module.ts b/src/app/pagination/pagination.module.ts
index 1ceb824ae3..3736151f12 100644
--- a/src/app/pagination/pagination.module.ts
+++ b/src/app/pagination/pagination.module.ts
@@ -1,19 +1,15 @@
import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxIconButtonDirective, IgxIconModule, IgxPaginatorModule, IgxRippleModule } from 'igniteui-angular';
import { PaginatorRoutingModule } from './pagination-routing.module';
import { PaginationSampleComponent } from './paginator/pagination-sample.component';
-@NgModule({
- declarations: [
+@NgModule({ declarations: [
PaginationSampleComponent
- ],
- imports: [
- CommonModule,
+ ], imports: [CommonModule,
FormsModule,
- HttpClientModule,
PaginatorRoutingModule,
IgxCardModule,
IgxPaginatorModule,
@@ -21,7 +17,5 @@ import { PaginationSampleComponent } from './paginator/pagination-sample.compone
IgxButtonGroupModule,
IgxIconModule,
IgxRippleModule,
- IgxIconButtonDirective
- ]
-})
+ IgxIconButtonDirective], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class PaginationModule { }
diff --git a/src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component.html b/src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component.html
index 29a78af691..4cda353ef3 100644
--- a/src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component.html
+++ b/src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component.html
@@ -14,5 +14,5 @@
+ [igxGridState]="options" [sortStrategy]="customStrategy" [pivotUI]='{ showConfiguration: false }' [superCompactMode]="true" [height]="'500px'">
\ No newline at end of file
diff --git a/src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component.html b/src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component.html
index b86ff39cc9..1504fd2f26 100644
--- a/src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component.html
+++ b/src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component.html
@@ -3,7 +3,7 @@
[data]="data"
[pivotConfiguration]="pivotConfigHierarchy"
[defaultExpandState]='true'
- [showPivotConfigurationUI]='false'
+ [pivotUI]='{ showConfiguration: false }'
[superCompactMode]="true"
[height]="'500px'">
diff --git a/src/app/pivot-grid/pivot-grids.module.ts b/src/app/pivot-grid/pivot-grids.module.ts
index 2cf2a5a58f..312009c45c 100644
--- a/src/app/pivot-grid/pivot-grids.module.ts
+++ b/src/app/pivot-grid/pivot-grids.module.ts
@@ -1,7 +1,7 @@
/* eslint-disable max-len */
// tslint:disable:max-line-length
import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IgxCheckboxModule, IgxIconModule, IgxPivotGridModule } from 'igniteui-angular';
@@ -15,8 +15,7 @@ import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persiste
import { PivotGridAboutComponent } from './pivot-state-persistence/about.component';
import { PivotGridNoopPersistenceSampleComponent } from './pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component';
-@NgModule({
- declarations: [
+@NgModule({ declarations: [
PivotGridBasicSampleComponent,
PivotDataSelectorSampleComponent,
PivotExportComponent,
@@ -25,15 +24,10 @@ import { PivotGridNoopPersistenceSampleComponent } from './pivot-grid-noop-persi
PivotGridNoopSampleComponent,
PivotGridAboutComponent,
PivotGridNoopPersistenceSampleComponent
- ],
- imports: [
- CommonModule,
+ ], imports: [CommonModule,
FormsModule,
- HttpClientModule,
PivotGridsRoutingModule,
IgxPivotGridModule,
IgxCheckboxModule,
- IgxIconModule
- ]
-})
+ IgxIconModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class PivotGridsModule { }
diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss
index b2785e459c..8c81ff5d74 100644
--- a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss
+++ b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss
@@ -3,3 +3,7 @@
min-width: 200px;
margin: 8px;
}
+
+.igx-calendar {
+ --ig-size: 2;
+}
diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss
index b2785e459c..8c81ff5d74 100644
--- a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss
+++ b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss
@@ -3,3 +3,7 @@
min-width: 200px;
margin: 8px;
}
+
+.igx-calendar {
+ --ig-size: 2;
+}
diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss
index 53bb9570b0..e3c918a8e3 100644
--- a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss
+++ b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss
@@ -3,6 +3,8 @@
$border-color: color($color: gray, $variant: 300);
igx-calendar {
+ --ig-size: 2;
+
border: 1px solid $border-color;
border-radius: 6px;
}
diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss
index ef07788fb0..47698f70ae 100644
--- a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss
@@ -4,7 +4,9 @@
margin: 8px;
}
-.igx-calendar{
+.igx-calendar {
+ --ig-size: 2;
+
box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
0 1px 1px 0 rgba(0,0,0,.12),
0 2px 1px -1px rgba(0,0,0,.08);
diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss
index 3c3e5c1bb0..c2f4b9dcfd 100644
--- a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss
@@ -8,6 +8,10 @@
border-radius: 6px;
}
+.igx-calendar {
+ --ig-size: 2;
+}
+
.location-wrapper {
min-width: 200px;
max-width: 640px;
diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html
index 8b46136251..59b43ffde0 100644
--- a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html
+++ b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html
@@ -3,7 +3,7 @@
-
+
-
+
person
+ Fullname is required
+ Please enter a valid name.
+359
-
+
phone
Ex.: +359 888 123 456
+ Phone number is required
@@ -36,6 +39,8 @@
email
+ Email is required
+ Please enter a valid email
Book your movie ticket
access_time
+
+
+
+
+ Agree to the terms of use.
+
+
+
+ 2D Movie
+
+
+ 3D Movie
+
+
+
+ Subtitles for the Deaf or Hard-of-Hearing (SDH)
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/how-to/reactive-forms/reactive-forms.component.scss b/src/app/how-to/reactive-forms/reactive-forms.component.scss
index 993b9a84b0..958e8df111 100644
--- a/src/app/how-to/reactive-forms/reactive-forms.component.scss
+++ b/src/app/how-to/reactive-forms/reactive-forms.component.scss
@@ -5,6 +5,7 @@
.container > * {
margin-top: 32px;
+ max-width: 450px;
}
.input-group-form {
@@ -16,3 +17,8 @@
h4 {
margin-top: 0;
}
+
+igx-card, article {
+ max-width: 400px;
+ margin: 20px;
+}
\ No newline at end of file
diff --git a/src/app/how-to/reactive-forms/reactive-forms.component.ts b/src/app/how-to/reactive-forms/reactive-forms.component.ts
index 2cdda5040b..a31d3da95f 100644
--- a/src/app/how-to/reactive-forms/reactive-forms.component.ts
+++ b/src/app/how-to/reactive-forms/reactive-forms.component.ts
@@ -1,6 +1,25 @@
import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DateRange, IRangeSliderValue } from 'igniteui-angular';
+
+export interface User{
+ date: FormControl
{{ summary.label }}
{{ format(summary.summaryResult) }}
diff --git a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.scss b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.scss
index c5b5f0e02d..398e18c7e6 100644
--- a/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.scss
+++ b/src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component.scss
@@ -56,17 +56,5 @@ div.igx-grid__tfoot {
justify-content: flex-end;
}
-.summaries-data-wrapper { display: inline-block; }
+.summaries-data-wrapper { display: inline-block; padding-right: 24px; }
.summaries-data-wrapper span:first-child { margin-right: 16px }
-
-.cosy {
- padding-right: 16px;
-}
-
-.compact {
- padding-right: 12px;
-}
-
-.comfortable {
- padding-right: 24px;
-}
\ No newline at end of file
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
index abb04fbbf5..6555d99a12 100644
--- a/src/app/grid/grids.module.ts
+++ b/src/app/grid/grids.module.ts
@@ -1,7 +1,7 @@
/* eslint-disable max-len */
// tslint:disable:max-line-length
import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
@@ -143,8 +143,7 @@ import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-e
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component';
-@NgModule({
- declarations: [
+@NgModule({ declarations: [
GridBatchEditingSampleComponent,
GridActionStripSampleComponent,
GridColumnHidingSampleComponent,
@@ -273,12 +272,9 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca
GridSummaryExportComponent,
GridStatePersistenceSampleComponent,
GridCascadingCombosComponent
- ],
- imports: [
- CommonModule,
+ ], imports: [CommonModule,
FormsModule,
IgxPreventDocumentScrollModule,
- HttpClientModule,
GridsRoutingModule,
IgcFormsModule,
IgxActionStripModule,
@@ -315,7 +311,5 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca
IgxSimpleComboModule,
IgxDragDropModule,
IgxDropDownModule,
- IgxIconButtonDirective
- ]
-})
+ IgxIconButtonDirective], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class GridsModule { }
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
index 920986d1d2..4a98fe2ab9 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
@@ -21,48 +21,51 @@ $light-gray: #999;
$inactive-color: #9b7829;
$dark-paginator: paginator-theme(
- $text-color: $my-secondary,
- $background-color: $my-primary,
- $border-color: $my-secondary
+ $text-color: $my-secondary,
+ $background-color: $my-primary,
+ $border-color: $my-secondary
);
-$dark-button: button-theme(
- $foreground: $my-secondary,
- $hover-foreground: $dark-gray,
- $hover-background: $my-secondary,
- $focus-foreground: $dark-gray,
- $focus-background: $my-secondary,
- $border-color: $my-secondary,
- $hover-border-color: $my-secondary,
- $focus-border-color: $my-secondary,
- $disabled-foreground: $inactive-color
+$dark-button: icon-button-theme(
+ $foreground: $my-secondary,
+ $hover-foreground: $dark-gray,
+ $hover-background: $my-secondary,
+ $focus-foreground: $dark-gray,
+ $focus-background: $my-secondary,
+ $border-color: $my-secondary,
+ $focus-border-color: $my-secondary,
+ $disabled-foreground: $inactive-color
);
$dark-select: select-theme(
- $toggle-button-background: $my-primary,
- $toggle-button-foreground: $inactive-color,
+ $toggle-button-background: $my-primary,
+ $toggle-button-foreground: $inactive-color,
+ $toggle-button-foreground-filled: $inactive-color,
+ $toggle-button-foreground-focus: $inactive-color,
+ $toggle-button-background-focus--border: $my-primary,
);
$dark-input-group: input-group-theme(
- $filled-text-color: $my-secondary,
- $idle-text-color: $my-secondary,
- $focused-text-color: $my-secondary,
- $border-color: darken($inactive-color, 10%),
- $focused-border-color: $my-secondary,
- $input-suffix-color: $my-secondary,
+ $filled-text-color: $my-secondary,
+ $idle-text-color: $my-secondary,
+ $filled-text-hover-color: $my-secondary,
+ $focused-text-color: $my-secondary,
+ $border-color: darken($inactive-color, 10%),
+ $focused-border-color: $my-secondary,
+ $input-suffix-color: $my-secondary,
);
$dark-drop-down-theme: drop-down-theme(
- $background-color: $my-primary,
- $item-text-color: $my-secondary,
- $selected-item-background: $my-secondary,
- $selected-item-text-color: $dark-gray,
- $focused-item-background: $my-secondary,
- $focused-item-text-color: $dark-gray,
- $selected-focus-item-background: $my-secondary,
- $selected-focus-item-text-color: $dark-gray,
- $selected-hover-item-background: $my-secondary,
- $selected-hover-item-text-color: $dark-gray
+ $background-color: $my-primary,
+ $item-text-color: $my-secondary,
+ $selected-item-background: $my-secondary,
+ $selected-item-text-color: $dark-gray,
+ $focused-item-background: $my-secondary,
+ $focused-item-text-color: $dark-gray,
+ $selected-focus-item-background: $my-secondary,
+ $selected-focus-item-text-color: $dark-gray,
+ $selected-hover-item-background: $my-secondary,
+ $selected-hover-item-text-color: $dark-gray
);
:host {
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging/remotePagingService.ts b/src/app/hierarchical-grid/hierarchical-grid-paging/remotePagingService.ts
index a62fd2d974..54cf8be4c8 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging/remotePagingService.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging/remotePagingService.ts
@@ -1,4 +1,4 @@
-import { HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
diff --git a/src/app/hierarchical-grid/hierarchical-grid-remote-paging-default-template/remotePagingService.ts b/src/app/hierarchical-grid/hierarchical-grid-remote-paging-default-template/remotePagingService.ts
index a62fd2d974..54cf8be4c8 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-remote-paging-default-template/remotePagingService.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-remote-paging-default-template/remotePagingService.ts
@@ -1,4 +1,4 @@
-import { HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts
index 7c0d4c5421..2e6834e42c 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts
@@ -1,7 +1,7 @@
/* eslint-disable max-len */
/* tslint:disable:max-line-length */
import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IgxActionStripModule, IgxAvatarModule, IgxBadgeModule, IgxBannerModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule,
@@ -99,8 +99,7 @@ import { HGridValidationStyleComponent } from './hierarchical-grid-validation-st
import { HGridPhoneFormatDirective, HierarchicalGridValidatorServiceExtendedComponent } from './hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component';
import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summary-export.component';
-@NgModule({
- declarations: [
+@NgModule({ declarations: [
HGridFilteringSampleComponent,
HGridCustomFilteringSampleComponent,
HGridSortingStylingComponent,
@@ -189,12 +188,9 @@ import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summar
HGridValidationStyleComponent,
HGridPhoneFormatDirective,
HGridSummaryExportComponent
- ],
- imports: [
- CommonModule,
+ ], imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
- HttpClientModule,
HierarchicalGridRoutingModule,
IgxPreventDocumentScrollModule,
IgxActionStripModule,
@@ -226,7 +222,5 @@ import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summar
IgxTabsModule,
IgxListModule,
IgxDragDropModule,
- IgxIconButtonDirective
- ]
-})
+ IgxIconButtonDirective], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class HierarchicalGridModule { }
diff --git a/src/app/how-to/reactive-forms/reactive-forms.component.html b/src/app/how-to/reactive-forms/reactive-forms.component.html
index ac87f7ccbb..3938f3c013 100644
--- a/src/app/how-to/reactive-forms/reactive-forms.component.html
+++ b/src/app/how-to/reactive-forms/reactive-forms.component.html
@@ -15,20 +15,23 @@ Book your movie ticket
Book your movie ticket
+
+ Choose your business credit card
+
+
+
+ 
+
+
+
+ {{card.price}}
+ {{card.offer}}
+
+
+
+ {{card.type}}
+{{card.description}}
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ {{selectedCard.price}}
+ {{selectedCard.offer}}
+
+ {{selectedCard.type}}
+{{selectedCard.description}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{selectedCard.price}}
+ {{selectedCard.offer}}
+
+ {{selectedCard.type}}
+{{selectedCard.description}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{selectedCard.price}}
+ {{selectedCard.offer}}
+
+ {{selectedCard.type}}
+{{selectedCard.description}}
+
+
+
+
+
+
+
+
+ Application date: {{ today | date:'d MMM y' }}
+
+
+
+
+
+
+
+ {{selectedCard.price}}
+ {{selectedCard.offer}}
+
+ {{selectedCard.type}}
+{{selectedCard.description}}
+
+
+
+
+
diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss
index 4163b6d1f1..26f9f607ca 100644
--- a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss
@@ -1,4 +1,6 @@
-.igx-calendar{
+.igx-calendar {
+ --ig-size: 2;
+
box-shadow: 0 1px 3px 0 rgba(0,0,0,.26),
0 1px 1px 0 rgba(0,0,0,.12),
0 2px 1px -1px rgba(0,0,0,.08);
@@ -7,11 +9,12 @@
:host {
display: flex;
width: 100%;
+ gap: 16px;
flex-flow: row wrap;
}
button {
- margin: 8px 0px;
+ margin: 8px 0;
}
.calendar-wrapper {
@@ -20,10 +23,10 @@
}
.calendar-section {
- height: 383px;
+ height: 336px;
}
- .selected-data-area{
+ .selected-data-area {
overflow-y: auto;
max-height: 500px;
width: 100%;
diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss
index 1959d5ef84..462c462c26 100644
--- a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss
@@ -10,6 +10,8 @@ $border-color: color($color: gray, $variant: 300);
margin: 8px;
}
-.igx-calendar{
+.igx-calendar {
+ --ig-size: 2;
+
border-radius: 4px;
}
diff --git a/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss b/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss
index 22d92d57e1..ff03d1741b 100644
--- a/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss
@@ -10,6 +10,8 @@ $border-color: color($color: gray, $variant: 300);
margin: 8px;
}
-.igx-calendar{
+.igx-calendar {
+ --ig-size: 2;
+
border-radius: 4px;
}
diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss
index 7cc4508fea..ab47e6b69a 100644
--- a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss
@@ -7,6 +7,10 @@
0 2px 1px -1px rgba(0,0,0,.08);
}
+.igx-calendar {
+ --ig-size: 2;
+}
+
.info {
display: flex;
justify-content: center;
diff --git a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
index 667e5027ec..49eeea0857 100644
--- a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss
@@ -1,4 +1,6 @@
.calendar-wrapper {
+ --ig-size: 2;
+
max-width: 700px;
min-width: 200px;
margin: 8px;
diff --git a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss
index 3fd9fc92d3..708dac2e19 100644
--- a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss
+++ b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss
@@ -1,4 +1,6 @@
.calendar-wrapper {
+ --ig-size: 2;
+
max-width: 400px;
min-width: 200px;
margin: 8px;
diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
index 635b723613..9e2b430867 100644
--- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
+++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss
@@ -7,6 +7,8 @@
}
.igx-calendar {
+ --ig-size: 2;
+
box-shadow: elevation(4);
}
diff --git a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss
index b2785e459c..afaa03b2d8 100644
--- a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss
+++ b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss
@@ -3,3 +3,9 @@
min-width: 200px;
margin: 8px;
}
+
+:host {
+ igx-years-view {
+ --ig-size: 2;
+ }
+}
diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss
index 8a1827773d..a98129cb3d 100644
--- a/src/app/scheduling/calendar/multiview/multiview.component.scss
+++ b/src/app/scheduling/calendar/multiview/multiview.component.scss
@@ -8,6 +8,8 @@
}
.igx-calendar {
+ --ig-size: 2;
+
border-radius: 0;
}
diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss b/src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss
index dec71ee7d7..946ab499e0 100644
--- a/src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss
+++ b/src/app/scheduling/monthpicker/monthpicker-sample-1/monthpicker-sample-1.component.scss
@@ -2,3 +2,7 @@ igx-card {
max-width: 400px;
margin: 20px;
}
+
+igx-month-picker {
+ --ig-size: 2;
+}
diff --git a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss
index 01d5228f65..0d10259122 100644
--- a/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss
+++ b/src/app/scheduling/monthpicker/monthpicker-sample-3/monthpicker-sample-3.component.scss
@@ -1,3 +1,7 @@
.card-wrapper {
max-width: 400px;
}
+
+igx-month-picker {
+ --ig-size: 2;
+}
diff --git a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
index 08f6b8e639..17875ce887 100644
--- a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
+++ b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss
@@ -1,22 +1,26 @@
@use '../../../../variables' as *;
igx-month-picker {
- max-width: 400px;
- margin: 20px;
+ --ig-size: 2;
+
+ max-width: 400px;
}
$my-calendar-theme: calendar-theme(
- $border-radius: 15px,
- $content-background: #011627,
- $picker-background: #011627,
- $month-current-foreground: #ECAA53,
- $month-hover-background: #ECAA53,
- $year-current-foreground: #ECAA53,
- $year-hover-foreground: #D37B08,
- $navigation-color: #ECAA53,
- $picker-hover-foreground: #D37B08,
- $navigation-hover-color: #D37B08,
- $picker-foreground: #ECAA53
+ $border-radius: 15px,
+ $content-background: #011627,
+ $picker-background: #011627,
+
+ $month-current-foreground: #ecaa53,
+ $month-hover-background: #ecaa53,
+
+ $year-current-foreground: #ecaa53,
+ $year-hover-background: #ecaa53,
+
+ $navigation-color: #ecaa53,
+ $picker-hover-foreground: #d37b08,
+ $navigation-hover-color: #d37b08,
+ $picker-foreground: #ecaa53
);
:host ::ng-deep {
diff --git a/src/app/theming/angular/angular-sample.component.scss b/src/app/theming/angular/angular-sample.component.scss
index f22c1d5316..45c70df0c3 100644
--- a/src/app/theming/angular/angular-sample.component.scss
+++ b/src/app/theming/angular/angular-sample.component.scss
@@ -1,9 +1,10 @@
@use '@angular/material' as mat;
@use '../../../variables' as *;
+@include mat.core();
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
$font-family: $material-typeface,
- $button: mat.define-typography-level(14px, $font-weight: 600)
+ $button: mat.m2-define-typography-level(14px, $font-weight: 600)
);
$saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700);
@@ -45,9 +46,9 @@ $custom-dark-palette: palette(
$error: #ff134a,
);
-$light-palette-primary: mat.define-palette(material-like-palette('primary', $saturations, $igx-light-palette));
-$light-palette-accent: mat.define-palette(material-like-palette('secondary', $saturations, $igx-light-palette));
-$custom-mat-light-theme: mat.define-light-theme((
+$light-palette-primary: mat.m2-define-palette(material-like-palette('primary', $saturations, $igx-light-palette));
+$light-palette-accent: mat.m2-define-palette(material-like-palette('secondary', $saturations, $igx-light-palette));
+$custom-mat-light-theme: mat.m2-define-light-theme((
color: (
primary: $light-palette-primary,
accent: $light-palette-accent
@@ -55,11 +56,11 @@ $custom-mat-light-theme: mat.define-light-theme((
typography: $custom-typography
));
-$dark-palette-primary: mat.define-palette(material-like-palette('primary', $saturations, $custom-dark-palette));
-$dark-palette-accent: mat.define-palette(material-like-palette('secondary', $saturations, $custom-dark-palette));
-$custom-mat-dark-theme: mat.define-dark-theme((
+$dark-palette-primary: mat.m2-define-palette(material-like-palette('primary', $saturations, $custom-dark-palette));
+$dark-palette-accent: mat.m2-define-palette(material-like-palette('secondary', $saturations, $custom-dark-palette));
+$custom-mat-dark-theme: mat.m2-define-dark-theme((
color: (
- primary: $dark-palette-primary,
+ primary: $dark-palette-primary,
accent: $dark-palette-accent
)
));
diff --git a/src/app/theming/styles/dark-theme.scss b/src/app/theming/styles/dark-theme.scss
index 531df92f90..a50c13786d 100644
--- a/src/app/theming/styles/dark-theme.scss
+++ b/src/app/theming/styles/dark-theme.scss
@@ -1,40 +1,40 @@
@use 'igniteui-angular/theming' as *;
// Import grid component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/grid/grid-component';
-@use '~igniteui-angular/lib/core/styles/components/grid/grid-theme';
+@use 'igniteui-angular/lib/core/styles/components/grid/grid-component';
+@use 'igniteui-angular/lib/core/styles/components/grid/grid-theme';
// Import paginator component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
-@use '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
+@use 'igniteui-angular/lib/core/styles/components/paginator/paginator-component';
+@use 'igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
// Import dialog-group component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/dialog/dialog-component';
-@use '~igniteui-angular/lib/core/styles/components/dialog/dialog-theme';
+@use 'igniteui-angular/lib/core/styles/components/dialog/dialog-component';
+@use 'igniteui-angular/lib/core/styles/components/dialog/dialog-theme';
// Import input-group component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/input/input-group-component';
-@use '~igniteui-angular/lib/core/styles/components/input/input-group-theme';
+@use 'igniteui-angular/lib/core/styles/components/input/input-group-component';
+@use 'igniteui-angular/lib/core/styles/components/input/input-group-theme';
// Import grid snackbar and theme styles
-@use '~igniteui-angular/lib/core/styles/components/snackbar/snackbar-component';
-@use '~igniteui-angular/lib/core/styles/components/snackbar/snackbar-theme';
+@use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-component';
+@use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-theme';
// Import button component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/button/button-component';
-@use '~igniteui-angular/lib/core/styles/components/button/button-theme';
+@use 'igniteui-angular/lib/core/styles/components/button/button-component';
+@use 'igniteui-angular/lib/core/styles/components/button/button-theme';
// Import button-group component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/button-group/button-group-component';
-@use '~igniteui-angular/lib/core/styles/components/button-group/button-group-theme';
+@use 'igniteui-angular/lib/core/styles/components/button-group/button-group-component';
+@use 'igniteui-angular/lib/core/styles/components/button-group/button-group-theme';
// Import chip component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/chip/chip-component';
-@use '~igniteui-angular/lib/core/styles/components/chip/chip-theme';
+@use 'igniteui-angular/lib/core/styles/components/chip/chip-component';
+@use 'igniteui-angular/lib/core/styles/components/chip/chip-theme';
// Import badge component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/badge/badge-component';
-@use '~igniteui-angular/lib/core/styles/components/badge/badge-theme';
+@use 'igniteui-angular/lib/core/styles/components/badge/badge-component';
+@use 'igniteui-angular/lib/core/styles/components/badge/badge-theme';
// Define the primary colors
$dark-color: #282828;
diff --git a/src/app/theming/styles/themes.scss b/src/app/theming/styles/themes.scss
index 599d8dfd21..46435eac84 100644
--- a/src/app/theming/styles/themes.scss
+++ b/src/app/theming/styles/themes.scss
@@ -1,56 +1,56 @@
@use 'schemas';
// Import grid component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/grid/grid-component';
-@use '~igniteui-angular/lib/core/styles//components/grid/grid-theme';
+@use 'igniteui-angular/lib/core/styles/components/grid/grid-component';
+@use 'igniteui-angular/lib/core/styles//components/grid/grid-theme';
// Import grid snackbar and theme styles
-@use '~igniteui-angular/lib/core/styles//components/snackbar/snackbar-component';
-@use '~igniteui-angular/lib/core/styles//components/snackbar/snackbar-theme';
+@use 'igniteui-angular/lib/core/styles//components/snackbar/snackbar-component';
+@use 'igniteui-angular/lib/core/styles//components/snackbar/snackbar-theme';
// Import input-group component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/input/input-group-component';
-@use '~igniteui-angular/lib/core/styles//components/input/input-group-theme';
+@use 'igniteui-angular/lib/core/styles//components/input/input-group-component';
+@use 'igniteui-angular/lib/core/styles//components/input/input-group-theme';
// Import dialog-group component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/dialog/dialog-component';
-@use '~igniteui-angular/lib/core/styles//components/dialog/dialog-theme';
+@use 'igniteui-angular/lib/core/styles//components/dialog/dialog-component';
+@use 'igniteui-angular/lib/core/styles//components/dialog/dialog-theme';
// Import paginator component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/paginator/paginator-component';
-@use '~igniteui-angular/lib/core/styles//components/paginator/paginator-theme';
+@use 'igniteui-angular/lib/core/styles//components/paginator/paginator-component';
+@use 'igniteui-angular/lib/core/styles//components/paginator/paginator-theme';
// Import button component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/button/button-component';
-@use '~igniteui-angular/lib/core/styles//components/button/button-theme';
+@use 'igniteui-angular/lib/core/styles//components/button/button-component';
+@use 'igniteui-angular/lib/core/styles//components/button/button-theme';
// Import button-group component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/button-group/button-group-component';
-@use '~igniteui-angular/lib/core/styles//components/button-group/button-group-theme';
+@use 'igniteui-angular/lib/core/styles//components/button-group/button-group-component';
+@use 'igniteui-angular/lib/core/styles//components/button-group/button-group-theme';
// Import drop-down component and theme styles
-@use '~igniteui-angular/lib/core/styles//components/drop-down/drop-down-component';
-@use '~igniteui-angular/lib/core/styles//components/drop-down/drop-down-theme';
+@use 'igniteui-angular/lib/core/styles//components/drop-down/drop-down-component';
+@use 'igniteui-angular/lib/core/styles//components/drop-down/drop-down-theme';
// Import calendar component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/calendar/calendar-component';
-@use '~igniteui-angular/lib/core/styles/components/calendar/calendar-theme';
+@use 'igniteui-angular/lib/core/styles/components/calendar/calendar-component';
+@use 'igniteui-angular/lib/core/styles/components/calendar/calendar-theme';
// Import chip component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/chip/chip-component';
-@use '~igniteui-angular/lib/core/styles/components/chip/chip-theme';
+@use 'igniteui-angular/lib/core/styles/components/chip/chip-component';
+@use 'igniteui-angular/lib/core/styles/components/chip/chip-theme';
// Import icon component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/icon/icon-component';
-@use '~igniteui-angular/lib/core/styles/components/icon/icon-theme';
+@use 'igniteui-angular/lib/core/styles/components/icon/icon-component';
+@use 'igniteui-angular/lib/core/styles/components/icon/icon-theme';
// Import drop-down component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/drop-down/drop-down-component';
-@use '~igniteui-angular/lib/core/styles/components/drop-down/drop-down-theme';
+@use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-component';
+@use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-theme';
// Import badge component and theme styles
-@use '~igniteui-angular/lib/core/styles/components/badge/badge-component';
-@use '~igniteui-angular/lib/core/styles/components/badge/badge-theme';
+@use 'igniteui-angular/lib/core/styles/components/badge/badge-component';
+@use 'igniteui-angular/lib/core/styles/components/badge/badge-theme';
// Define the primary colors
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
index ba503c0f50..687d5c02cf 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
@@ -13,50 +13,54 @@ $light-gray: #999;
$inactive-color: #9b7829;
$dark-paginator: paginator-theme(
- $text-color: $my-secondary,
- $background-color: $my-primary,
- $border-color: $my-secondary
+ $text-color: $my-secondary,
+ $background-color: $my-primary,
+ $border-color: $my-secondary
);
-$dark-button: button-theme(
- $foreground: $my-secondary,
- $hover-foreground: $dark-gray,
- $hover-background: $my-secondary,
- $focus-foreground: $dark-gray,
- $focus-background: $my-secondary,
- $border-color: $my-secondary,
- $hover-border-color: $my-secondary,
- $focus-border-color: $my-secondary,
- $disabled-foreground: $inactive-color
+$dark-button: icon-button-theme(
+ $foreground: $my-secondary,
+ $hover-foreground: $dark-gray,
+ $hover-background: $my-secondary,
+ $focus-foreground: $dark-gray,
+ $focus-background: $my-secondary,
+ $border-color: $my-secondary,
+ $focus-border-color: $my-secondary,
+ $disabled-foreground: $inactive-color
);
$dark-select: select-theme(
- $toggle-button-background: $my-primary,
- $toggle-button-foreground: $inactive-color,
+ $toggle-button-background: $my-primary,
+ $toggle-button-foreground: $inactive-color,
+ $toggle-button-foreground-filled: $inactive-color,
+ $toggle-button-foreground-focus: $inactive-color,
+ $toggle-button-background-focus--border: $my-primary,
);
$dark-input-group: input-group-theme(
- $filled-text-color: $my-secondary,
- $idle-text-color: $my-secondary,
- $focused-text-color: $my-secondary,
- $border-color: darken($inactive-color, 10%),
- $focused-border-color: $my-secondary,
- $input-suffix-color: $my-secondary,
+ $filled-text-color: $my-secondary,
+ $idle-text-color: $my-secondary,
+ $filled-text-hover-color: $my-secondary,
+ $focused-text-color: $my-secondary,
+ $border-color: darken($inactive-color, 10%),
+ $focused-border-color: $my-secondary,
+ $input-suffix-color: $my-secondary,
);
$dark-drop-down-theme: drop-down-theme(
- $background-color: $my-primary,
- $item-text-color: $my-secondary,
- $selected-item-background: $my-secondary,
- $selected-item-text-color: $dark-gray,
- $focused-item-background: $my-secondary,
- $focused-item-text-color: $dark-gray,
- $selected-focus-item-background: $my-secondary,
- $selected-focus-item-text-color: $dark-gray,
- $selected-hover-item-background: $my-secondary,
- $selected-hover-item-text-color: $dark-gray
+ $background-color: $my-primary,
+ $item-text-color: $my-secondary,
+ $selected-item-background: $my-secondary,
+ $selected-item-text-color: $dark-gray,
+ $focused-item-background: $my-secondary,
+ $focused-item-text-color: $dark-gray,
+ $selected-focus-item-background: $my-secondary,
+ $selected-focus-item-text-color: $dark-gray,
+ $selected-hover-item-background: $my-secondary,
+ $selected-hover-item-text-color: $dark-gray
);
+
:host {
::ng-deep {
@include css-vars($dark-drop-down-theme);
diff --git a/src/styles.scss b/src/styles.scss
index 82df00bb3a..0dc0c0019e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,6 +2,13 @@
@use 'variables' as *;
@use 'app-layout';
+
+// Specifies large size for all components to match the previous defaults
+// This may not be needed for your project. Please consult https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide for more details.
+:root {
+ --ig-size: var(--ig-size-large);
+}
+
/* autoprefixer grid: on */
html,
body {
diff --git a/tsconfig.json b/tsconfig.json
index 8fa790392e..e2f0c92348 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,12 +4,12 @@
"importHelpers": true,
"module": "ES2022",
"outDir": "./dist/out-tsc",
+ "esModuleInterop": true,
"sourceMap": false,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "downlevelIteration": true,
"target": "ES2022",
"typeRoots": [
"node_modules/@types"