Merge pull request #2 from andiesm813/andiesm813-2024-07-15

⭐ All AB Components 2024 ⭐ updates
andiesm813 · Jul 15, 2024 · 060d77e · 060d77e
2 parents 906f515 + 2fc0976
commit 060d77e
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 14 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -5,7 +5,8 @@ import { MasterViewComponent } from './master-view/master-view.component';
 import { IGX_NAVBAR_DIRECTIVES, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_ACCORDION_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IGX_TREE_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IgxButtonDirective, IGX_CARD_DIRECTIVES, IgxDividerDirective, IGX_INPUT_GROUP_DIRECTIVES, IgxToggleDirective, IgxToggleActionDirective, IgxOverlayOutletDirective, IGX_BUTTON_GROUP_DIRECTIVES, IgxBadgeComponent, IgxCheckboxComponent, IgxRadioComponent, IgxRadioGroupDirective, IgxSwitchComponent, IgcFormsModule, IGX_DATE_PICKER_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_GRID_DIRECTIVES, IgxSnackbarComponent, IGX_DIALOG_DIRECTIVES, IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular';
 import { FormsModule } from '@angular/forms';
 import { IgxCategoryChartModule } from 'igniteui-angular-charts';
-import { MasterView1Component } from './master-view1/master-view1.component';
+import { RadioGroupComponent } from './radio-group/radio-group.component';
+import { StepperComponent } from './stepper/stepper.component';
 
 @Component({
   selector: 'app-root',

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -2,12 +2,14 @@ import { Routes } from '@angular/router';
 import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
 import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
 import { MasterViewComponent } from './master-view/master-view.component';
-import { MasterView1Component } from './master-view1/master-view1.component';
+import { RadioGroupComponent } from './radio-group/radio-group.component';
+import { StepperComponent } from './stepper/stepper.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'master-view', pathMatch: 'full' },
   { path: 'error', component: UncaughtErrorComponent },
   { path: 'master-view', component: MasterViewComponent, data: { text: 'Master View' } },
-  { path: 'master-view1', component: MasterView1Component, data: { text: 'Master View 1' } },
+  { path: 'radio-group', component: RadioGroupComponent, data: { text: 'RadioGroup' } },
+  { path: 'stepper', component: StepperComponent, data: { text: 'Stepper' } },
   { path: '**', component: PageNotFoundComponent } // must always be last
 ];
diff --git a/src/app/master-view/master-view.component.html b/src/app/master-view/master-view.component.html
@@ -740,7 +740,7 @@ <h5 igxCardHeaderSubtitle>
             </h5>
           </igx-card-header>
           <igx-card-content class="body-content">
-            <p class="text">
+            <p class="ig-typography__body-2 text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             </p>
           </igx-card-content>

diff --git a/.../master-view1/master-view1.component.html → ...pp/radio-group/radio-group.component.html b/.../master-view1/master-view1.component.html → ...pp/radio-group/radio-group.component.html
diff --git a/.../master-view1/master-view1.component.scss → ...pp/radio-group/radio-group.component.scss b/.../master-view1/master-view1.component.scss → ...pp/radio-group/radio-group.component.scss
diff --git a/...ster-view1/master-view1.component.spec.ts → ...radio-group/radio-group.component.spec.ts b/...ster-view1/master-view1.component.spec.ts → ...radio-group/radio-group.component.spec.ts
@@ -3,22 +3,22 @@ import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { IgxRadioComponent, IgxRadioGroupDirective } from '@infragistics/igniteui-angular';
-import { MasterView1Component } from './master-view1.component';
+import { RadioGroupComponent } from './radio-group.component';
 
-describe('MasterView1Component', () => {
-  let component: MasterView1Component;
-  let fixture: ComponentFixture<MasterView1Component>;
+describe('RadioGroupComponent', () => {
+  let component: RadioGroupComponent;
+  let fixture: ComponentFixture<RadioGroupComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MasterView1Component ],
+      declarations: [ RadioGroupComponent ],
       imports: [ NoopAnimationsModule, FormsModule, IgxRadioComponent, IgxRadioGroupDirective ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MasterView1Component);
+    fixture = TestBed.createComponent(RadioGroupComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/...pp/master-view1/master-view1.component.ts → src/app/radio-group/radio-group.component.ts b/...pp/master-view1/master-view1.component.ts → src/app/radio-group/radio-group.component.ts
@@ -3,12 +3,12 @@ import { FormsModule } from '@angular/forms';
 import { IgxRadioComponent, IgxRadioGroupDirective } from '@infragistics/igniteui-angular';
 
 @Component({
-  selector: 'app-master-view1',
+  selector: 'app-radio-group',
   standalone: true,
   imports: [IgxRadioGroupDirective, IgxRadioComponent, FormsModule],
-  templateUrl: './master-view1.component.html',
-  styleUrls: ['./master-view1.component.scss']
+  templateUrl: './radio-group.component.html',
+  styleUrls: ['./radio-group.component.scss']
 })
-export class MasterView1Component {
+export class RadioGroupComponent {
   public value: string = '1';
 }
diff --git a/src/app/stepper/stepper.component.html b/src/app/stepper/stepper.component.html
@@ -0,0 +1,106 @@
+<igx-stepper titlePosition="bottom" verticalAnimationType="none" horizontalAnimationType="none" #stepper2 class="stepper">
+  <igx-step [isValid]="false">
+    <div igxStepContent class="column-layout step-content">
+      <igx-input-group type="border" class="input">
+        <input type="text" placeholder="This is the placeholder" igxInput />
+        <label igxLabel>Label</label>
+      </igx-input-group>
+      <igx-input-group type="border" class="input">
+        <input type="text" placeholder="This is the placeholder" igxInput />
+        <label igxLabel>Label</label>
+      </igx-input-group>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper2.next()" class="button">
+          Next
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Address</p>
+  </igx-step>
+  <igx-step [isValid]="false">
+    <div igxStepContent class="column-layout step-content">
+      <p class="text">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur soluta nulla asperiores, officia ullam recusandae voluptatem omnis perferendis vitae non magni magnam praesentium placeat nemo quas repudiandae. Nisi, quo ex!
+      </p>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper2.prev()" class="button">
+          Prev
+        </button>
+        <button igxButton="contained" igxRipple (click)="stepper2.next()" class="button">
+          Next
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Item</p>
+  </igx-step>
+  <igx-step [optional]="true">
+    <div igxStepContent class="column-layout step-content">
+      <p class="text">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur soluta nulla asperiores, officia ullam recusandae voluptatem omnis perferendis vitae non magni magnam praesentium placeat nemo quas repudiandae. Nisi, quo ex!
+      </p>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper2.prev()" class="button">
+          Prev
+        </button>
+        <button igxButton="contained" igxRipple (click)="stepper2.reset()" class="button">
+          Reset
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Wrap</p>
+    <p igxStepSubTitle>(Optional)</p>
+  </igx-step>
+</igx-stepper>
+<igx-stepper orientation="vertical" titlePosition="bottom" verticalAnimationType="none" horizontalAnimationType="none" #stepper3 class="stepper">
+  <igx-step [isValid]="false">
+    <div igxStepContent class="column-layout step-content">
+      <igx-input-group type="border" class="input">
+        <input type="text" placeholder="This is the placeholder" igxInput />
+        <label igxLabel>Label</label>
+      </igx-input-group>
+      <igx-input-group type="border" class="input">
+        <input type="text" placeholder="This is the placeholder" igxInput />
+        <label igxLabel>Label</label>
+      </igx-input-group>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper3.next()" class="button">
+          Next
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Address</p>
+  </igx-step>
+  <igx-step [isValid]="false">
+    <div igxStepContent class="column-layout step-content">
+      <p class="text">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur soluta nulla asperiores, officia ullam recusandae voluptatem omnis perferendis vitae non magni magnam praesentium placeat nemo quas repudiandae. Nisi, quo ex!
+      </p>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper3.prev()" class="button">
+          Prev
+        </button>
+        <button igxButton="contained" igxRipple (click)="stepper3.next()" class="button">
+          Next
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Item</p>
+  </igx-step>
+  <igx-step [optional]="true">
+    <div igxStepContent class="column-layout step-content">
+      <p class="text">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur soluta nulla asperiores, officia ullam recusandae voluptatem omnis perferendis vitae non magni magnam praesentium placeat nemo quas repudiandae. Nisi, quo ex!
+      </p>
+      <div class="row-layout group">
+        <button igxButton="contained" igxRipple (click)="stepper3.prev()" class="button">
+          Prev
+        </button>
+        <button igxButton="contained" igxRipple (click)="stepper3.reset()" class="button">
+          Reset
+        </button>
+      </div>
+    </div>
+    <p igxStepTitle>Wrap</p>
+    <p igxStepSubTitle>(Optional)</p>
+  </igx-step>
+</igx-stepper>
diff --git a/src/app/stepper/stepper.component.scss b/src/app/stepper/stepper.component.scss
@@ -0,0 +1,54 @@
+:host {
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 24px;
+}
+.stepper {
+  min-width: 0;
+  min-height: 0;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+.column-layout {
+  display: flex;
+  flex-direction: column;
+}
+.step-content {
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 10px;
+  overflow: auto;
+  position: relative;
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+.input {
+  height: max-content;
+  min-width: min-content;
+}
+.button {
+  height: max-content;
+  flex-shrink: 0;
+}
+.row-layout {
+  display: flex;
+}
+.group {
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  gap: 0.5rem;
+  position: relative;
+  min-width: 50px;
+  min-height: 50px;
+}
+.text {
+  height: max-content;
+  min-width: min-content;
+}
diff --git a/src/app/stepper/stepper.component.spec.ts b/src/app/stepper/stepper.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { IGX_STEPPER_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular';
+import { StepperComponent } from './stepper.component';
+
+describe('StepperComponent', () => {
+  let component: StepperComponent;
+  let fixture: ComponentFixture<StepperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StepperComponent ],
+      imports: [ NoopAnimationsModule, FormsModule, IGX_STEPPER_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxButtonDirective, IgxRippleDirective ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/stepper/stepper.component.ts b/src/app/stepper/stepper.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IGX_INPUT_GROUP_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IgxButtonDirective, IgxOverlayOutletDirective, IgxRippleDirective, IgxToggleActionDirective, IgxToggleDirective } from '@infragistics/igniteui-angular';
+
+@Component({
+  selector: 'app-stepper',
+  standalone: true,
+  imports: [IGX_INPUT_GROUP_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IgxToggleActionDirective, IgxOverlayOutletDirective, IgxButtonDirective, IgxRippleDirective, IgxToggleDirective],
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss']
+})
+export class StepperComponent {}