Merge pull request #11 from andiesm813/andiesm813-2024-07-25

⭐ All AB Components 2024 ⭐ updates
andiesm813 · Jul 25, 2024 · 781dbdf · 781dbdf
2 parents a2b448f + ad5b584
commit 781dbdf
Show file tree

Hide file tree

Showing 9 changed files with 355 additions and 16 deletions.
diff --git a/src/app/all-components/all-components.component.html b/src/app/all-components/all-components.component.html
@@ -71,13 +71,9 @@
             </igx-list-item>
             <igx-list-item>
               <span igxListThumbnail>
-                <igx-avatar shape="circle">
-                  <igx-icon>
-                    person
-                  </igx-icon>
-                </igx-avatar>
+                <igx-avatar src="/assets/d4c387693b4db8c8354a14897762a46dcf820844.png" shape="circle" class="avatar"></igx-avatar>
               </span>
-              <span igxListLineTitle>Default with Subtitle and Avatar</span>
+              <span igxListLineTitle>Image asset</span>
               <span igxListLineSubTitle>Subtitle...</span>
               <span igxListAction>
                 <igx-icon class="icon">
@@ -87,9 +83,25 @@
             </igx-list-item>
             <igx-list-item>
               <span igxListThumbnail>
-                <igx-avatar src="/assets/d4c387693b4db8c8354a14897762a46dcf820844.png" shape="circle" class="avatar"></igx-avatar>
+                <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="circle" class="avatar"></igx-avatar>
+              </span>
+              <span igxListLineTitle>Image URL</span>
+              <span igxListLineSubTitle>Subtitle...</span>
+              <span igxListAction>
+                <igx-icon class="icon">
+                  keyboard_arrow_right
+                </igx-icon>
+              </span>
+            </igx-list-item>
+            <igx-list-item>
+              <span igxListThumbnail>
+                <igx-avatar shape="circle">
+                  <igx-icon>
+                    person
+                  </igx-icon>
+                </igx-avatar>
               </span>
-              <span igxListLineTitle>Image Avatar</span>
+              <span igxListLineTitle>Default with Subtitle and Avatar</span>
               <span igxListLineSubTitle>Subtitle...</span>
               <span igxListAction>
                 <igx-icon class="icon">
@@ -598,12 +610,15 @@ <h5 igxCardHeaderSubtitle>
           people
         </igx-icon>
       </igx-avatar>
-      <igx-avatar initials="AB" shape="rounded" size="large"></igx-avatar>
-      <igx-avatar initials="AB" shape="rounded" size="medium"></igx-avatar>
-      <igx-avatar initials="AB" shape="rounded"></igx-avatar>
+      <igx-avatar initials="AB" size="large"></igx-avatar>
+      <igx-avatar initials="AB" size="medium"></igx-avatar>
+      <igx-avatar initials="AB"></igx-avatar>
       <igx-avatar src="/assets/a7f211be67afc061d9571f5b5b5236cd92420e0c.png" shape="rounded" size="large" class="avatar"></igx-avatar>
       <igx-avatar src="/assets/a7f211be67afc061d9571f5b5b5236cd92420e0c.png" shape="rounded" size="medium" class="avatar"></igx-avatar>
       <igx-avatar src="/assets/a7f211be67afc061d9571f5b5b5236cd92420e0c.png" shape="rounded" class="avatar"></igx-avatar>
+      <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded" size="large" class="avatar"></igx-avatar>
+      <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded" size="medium" class="avatar"></igx-avatar>
+      <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded" class="avatar"></igx-avatar>
     </div>
   </div>
   <div class="column-layout group_14">

diff --git a/src/app/all-components/all-components.component.scss b/src/app/all-components/all-components.component.scss
@@ -13,7 +13,7 @@
 .group {
   justify-content: flex-start;
   align-items: stretch;
-  align-content: flex-start;
+  align-content: stretch;
   gap: 24px;
   overflow: auto;
   position: relative;
@@ -33,7 +33,7 @@
   align-content: flex-start;
   gap: 24px;
   position: relative;
-  min-width: 400px;
+  min-width: 320px;
   min-height: 50px;
   flex-grow: 1;
   flex-basis: 0;
@@ -86,7 +86,7 @@
   gap: 16px;
   overflow: auto;
   position: relative;
-  min-width: 50px;
+  min-width: 320px;
   min-height: 50px;
   flex-grow: 1;
   flex-basis: 0;
@@ -165,7 +165,7 @@
   align-content: flex-start;
   gap: 16px;
   position: relative;
-  min-width: 50px;
+  min-width: 240px;
   min-height: 50px;
   flex-grow: 1;
   flex-basis: 0;

diff --git a/src/app/all-components/all-components.component.ts b/src/app/all-components/all-components.component.ts
@@ -4,8 +4,8 @@ import { IgcFormsModule, IGX_ACCORDION_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BU
 import { IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { Subject, takeUntil } from 'rxjs';
-import { BoxOfficeRevenueType } from '../models/financial/box-office-revenue-type';
 import { EmployeesType } from '../models/northwind/employees-type';
+import { BoxOfficeRevenueType } from '../models/financial/box-office-revenue-type';
 import { FinancialService } from '../services/financial.service';
 import { NorthwindService } from '../services/northwind.service';
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -55,6 +55,12 @@ <h6 class="h6">
         </igx-icon>
         <span>Forms</span>
       </div>
+      <div igxDrawerItem igxRipple routerLink="/forms">
+        <igx-icon class="icon">
+          view_list
+        </igx-icon>
+        <span>Lists</span>
+      </div>
       <div igxDrawerItem igxRipple routerLink="/radiogroup">
         <igx-icon class="icon">
           radio_button_checked

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -5,6 +5,7 @@ import { AllComponentsComponent } from './all-components/all-components.componen
 import { AvatarsImagesComponent } from './avatars-images/avatars-images.component';
 import { CalendarComponent } from './calendar/calendar.component';
 import { FormsComponent } from './forms/forms.component';
+import { ListsComponent } from './lists/lists.component';
 import { RadiogroupComponent } from './radiogroup/radiogroup.component';
 import { StepperComponent } from './stepper/stepper.component';
 
@@ -15,6 +16,7 @@ export const routes: Routes = [
   { path: 'avatars-images', component: AvatarsImagesComponent, data: { text: 'Avatars-Images' } },
   { path: 'calendar', component: CalendarComponent, data: { text: 'Calendar' } },
   { path: 'forms', component: FormsComponent, data: { text: 'Forms' } },
+  { path: 'lists', component: ListsComponent, data: { text: 'Lists' } },
   { path: 'radiogroup', component: RadiogroupComponent, data: { text: 'Radiogroup' } },
   { path: 'stepper', component: StepperComponent, data: { text: 'Stepper' } },
   { path: '**', component: PageNotFoundComponent } // must always be last

diff --git a/src/app/lists/lists.component.html b/src/app/lists/lists.component.html
@@ -0,0 +1,232 @@
+<div class="row-layout group">
+  <div class="column-layout group_1">
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Single Line Item Default</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar>
+            <igx-icon>
+              person
+            </igx-icon>
+          </igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar>
+            <igx-icon>
+              person
+            </igx-icon>
+          </igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar>
+            <igx-icon>
+              person
+            </igx-icon>
+          </igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar initials="AB" shape="rounded"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar initials="AB" shape="rounded"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar initials="AB" shape="rounded"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Single Line Item Default</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+  </div>
+  <div class="column-layout group_1">
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1638643391904-9b551ba91eaa?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item [isHeader]="true">Header</igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/7e86e8b8b495deb8eefcdd3556151a40532211e1.png" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Default with Subtitle and Avatar</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/d4c387693b4db8c8354a14897762a46dcf820844.png" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Default with Subtitle and Avatar</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/a7f211be67afc061d9571f5b5b5236cd92420e0c.png" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Default with Subtitle and Avatar</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+        <span igxListAction>
+          <igx-icon class="icon">
+            keyboard_arrow_right
+          </igx-icon>
+        </span>
+      </igx-list-item>
+    </igx-list>
+  </div>
+</div>