Merge pull request #6 from andiesm813/andiesm813-2024-07-24

⭐ All AB Components 2024 ⭐ updates
andiesm813 · Jul 24, 2024 · 038d274 · 038d274
2 parents 8e113e8 + aace250
commit 038d274
Show file tree

Hide file tree

Showing 19 changed files with 421 additions and 6 deletions.
diff --git a/ignite-ui-cli.json b/ignite-ui-cli.json
@@ -1,5 +1,5 @@
 {
-  "version": "17.2.1323",
+  "version": "17.2.1324",
   "project": {
     "defaultPort": 4200,
     "framework": "angular",

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "hammerjs": "~2.0.8",
     "igniteui-angular-charts": "~17.3.0",
     "igniteui-angular-core": "~17.3.0",
-    "igniteui-webcomponents": "~4.9.0",
+    "igniteui-webcomponents": "~4.11.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.0",
     "tslib": "~2.3.0",
@@ -43,7 +43,7 @@
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "eslint": "~8.52.0",
-    "@igniteui/angular-schematics": "~17.2.1323",
+    "@igniteui/angular-schematics": "~17.2.1324",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.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
@@ -37,6 +37,12 @@ <h6 class="h6">
         <igx-icon family="imx-icon" name="imx-development" class="icon"></igx-icon>
         <span>All Components</span>
       </div>
+      <div igxDrawerItem igxRipple routerLink="/all-components">
+        <igx-icon class="icon">
+          image
+        </igx-icon>
+        <span>Avatars &amp; Images</span>
+      </div>
       <div igxDrawerItem igxRipple routerLink="/forms">
         <igx-icon class="icon">
           dynamic_form

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,5 +9,4 @@ import { IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxIconButtonD
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-}
+export class AppComponent {}
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -2,16 +2,20 @@ 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 { AllComponentsComponent } from './all-components/all-components.component';
+import { AvatarsImagesComponent } from './avatars-images/avatars-images.component';
 import { FormsComponent } from './forms/forms.component';
 import { RadiogroupComponent } from './radiogroup/radiogroup.component';
 import { StepperComponent } from './stepper/stepper.component';
+import { ChildViewComponent } from './child-view/child-view.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'all-components', pathMatch: 'full' },
   { path: 'error', component: UncaughtErrorComponent },
   { path: 'all-components', component: AllComponentsComponent, data: { text: 'AllComponents' } },
+  { path: 'avatars-images', component: AvatarsImagesComponent, data: { text: 'Avatars-Images' } },
   { path: 'forms', component: FormsComponent, data: { text: 'Forms' } },
   { path: 'radiogroup', component: RadiogroupComponent, data: { text: 'Radiogroup' } },
   { path: 'stepper', component: StepperComponent, data: { text: 'Stepper' } },
+  { path: 'child-view', component: ChildViewComponent, data: { text: 'Child View' } },
   { path: '**', component: PageNotFoundComponent } // must always be last
 ];
diff --git a/src/app/avatars-images/avatars-images.component.html b/src/app/avatars-images/avatars-images.component.html
@@ -0,0 +1,187 @@
+<div class="column-layout group">
+  <div class="row-layout group_1">
+    <div class="column-layout group_2">
+      <div class="row-layout group_3">
+        <igx-avatar src="/assets/a7f211be67afc061d9571f5b5b5236cd92420e0c.png" size="large" shape="circle" class="avatar"></igx-avatar>
+        <igx-avatar src="/assets/7e86e8b8b495deb8eefcdd3556151a40532211e1.png" shape="rounded" size="medium" class="avatar"></igx-avatar>
+        <igx-avatar src="/assets/d4c387693b4db8c8354a14897762a46dcf820844.png" class="avatar"></igx-avatar>
+      </div>
+      <p class="ig-typography__subtitle-2 text">
+        Images from Assets
+      </p>
+    </div>
+    <div class="column-layout group_2">
+      <div class="row-layout group_3">
+        <igx-avatar src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" size="large" shape="circle" class="avatar"></igx-avatar>
+        <igx-avatar src="https://images.unsplash.com/photo-1640379878948-72b9db349e17?q=80&w=1944&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-1642861937504-62b536fcc1b9?q=80&w=1944&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="avatar"></igx-avatar>
+      </div>
+      <p class="ig-typography__subtitle-2 text">
+        Images from URL
+      </p>
+    </div>
+  </div>
+  <div class="row-layout group_2">
+    <igx-list class="list">
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>No image</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/a06650fce7091f420c440f26201d916f775db29d.png" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from Workspace</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1639503611585-1054af5dbfab?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar size="medium" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>No image</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/10a04583112d68e72f71ea3d9a5d02a35bbdf8d8.png" shape="rounded" size="medium" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from Workspace</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded" size="medium" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+    </igx-list>
+    <igx-list class="list">
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar size="large" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>No image</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="/assets/82e19827573e63ebf434524f39a708e6fd21f88a.png" size="large" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from Workspace</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+      <igx-list-item>
+        <span igxListThumbnail>
+          <igx-avatar src="https://plus.unsplash.com/premium_photo-1681426472026-60d4bf7b69a1?q=80&w=3880&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" size="large" shape="circle" class="avatar"></igx-avatar>
+        </span>
+        <span igxListLineTitle>Image from URL</span>
+        <span igxListLineSubTitle>Subtitle...</span>
+      </igx-list-item>
+    </igx-list>
+  </div>
+  <div class="row-layout group_4">
+    <igx-card class="card">
+      <igx-card-media height="200px" class="media-content">
+        <img src="/assets/start-building-dark.svg" class="image" />
+      </igx-card-media>
+      <igx-card-header>
+        <div igxCardThumbnail>
+          <igx-avatar src="/assets/Avatar13.png" size="large" shape="circle" class="avatar"></igx-avatar>
+        </div>
+        <h3 igxCardHeaderTitle>
+          Images from Assets
+        </h3>
+        <h5 igxCardHeaderSubtitle>
+          Subtitle goes here...
+        </h5>
+      </igx-card-header>
+      <igx-card-actions class="actions-content">
+        <ng-container igxStart>
+          <button igxButton="flat" igxRipple class="button">
+            Button
+          </button>
+        </ng-container>
+        <ng-container igxEnd>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              favorite
+            </igx-icon>
+          </button>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              bookmark
+            </igx-icon>
+          </button>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              share
+            </igx-icon>
+          </button>
+        </ng-container>
+      </igx-card-actions>
+    </igx-card>
+    <igx-card class="card">
+      <igx-card-media height="200px" class="media-content">
+        <img 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" class="image" />
+      </igx-card-media>
+      <igx-card-header>
+        <div igxCardThumbnail>
+          <igx-avatar src="https://images.unsplash.com/photo-1636622433525-127afdf3662d?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" size="large" shape="circle" class="avatar"></igx-avatar>
+        </div>
+        <h3 igxCardHeaderTitle>
+          Images From URL
+        </h3>
+        <h5 igxCardHeaderSubtitle>
+          Subtitle goes here...
+        </h5>
+      </igx-card-header>
+      <igx-card-actions class="actions-content">
+        <ng-container igxStart>
+          <button igxButton="flat" igxRipple class="button">
+            Button
+          </button>
+        </ng-container>
+        <ng-container igxEnd>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              favorite
+            </igx-icon>
+          </button>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              bookmark
+            </igx-icon>
+          </button>
+          <button igxRipple igxIconButton="flat">
+            <igx-icon>
+              share
+            </igx-icon>
+          </button>
+        </ng-container>
+      </igx-card-actions>
+    </igx-card>
+  </div>
+</div>
+<div class="column-layout group">
+  <p class="ig-typography__subtitle-2 text">
+    Image from Assets
+  </p>
+  <img src="/assets/SketchParser.png" class="image_1" />
+  <p class="ig-typography__subtitle-2 text">
+    Image from URL
+  </p>
+  <img src="https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="image_2" />
+</div>
diff --git a/src/app/avatars-images/avatars-images.component.scss b/src/app/avatars-images/avatars-images.component.scss
@@ -0,0 +1,108 @@
+:host {
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.column-layout {
+  display: flex;
+  flex-direction: column;
+}
+.group {
+  justify-content: center;
+  align-items: center;
+  align-content: flex-start;
+  gap: 24px;
+  position: relative;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+.row-layout {
+  display: flex;
+}
+.group_1 {
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 24px;
+  position: relative;
+}
+.group_2 {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 8px;
+  position: relative;
+  min-width: 50px;
+  min-height: 50px;
+}
+.group_3 {
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 8px;
+  position: relative;
+}
+.group_4 {
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 16px;
+  position: relative;
+}
+.card {
+  width: 320px;
+  height: max-content;
+  min-width: 320px;
+  max-width: 320px;
+  flex-shrink: 0;
+}
+.avatar {
+  --igx-avatar-background: transparent;
+}
+.text {
+  height: max-content;
+  min-width: min-content;
+}
+.image {
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+.image_1 {
+  object-fit: cover;
+  width: 509px;
+  height: 296px;
+  min-width: 0;
+  min-height: 0;
+  max-width: 509px;
+  max-height: 296px;
+  flex-shrink: 0;
+}
+.image_2 {
+  object-fit: cover;
+  width: 509px;
+  height: 306px;
+  min-width: 0;
+  min-height: 0;
+  max-width: 509px;
+  max-height: 306px;
+  flex-shrink: 0;
+}
+.media-content {
+  min-height: 200px;
+  max-height: 200px;
+}
+.actions-content {
+  min-width: 50px;
+  min-height: 40px;
+}
+.list {
+  height: max-content;
+  flex-shrink: 0;
+}
+.button {
+  height: max-content;
+}