feat(theming): add roundness sample

Author: adrianptrv

src/app/theming/roundness/roundness-sample.component.css

@@ -0,0 +1,23 @@
+.chip1{
+    --ig-radius-factor: 0;
+}
+
+.chip2{
+    --ig-radius-factor: 1;
+}
+
+.chip-wrapper {
+    text-align: center;
+}
+
+.sample-container {
+    display: flex;
+    justify-content: center;
+    gap: 5rem;
+    padding-top: 30px;
+}
+
+p{
+    font-size: 17px;
+    font-weight: bold;
+}

src/app/theming/roundness/roundness-sample.component.html

@@ -0,0 +1,16 @@
+<div class="sample-container">
+  <div class="chip-wrapper">
+    <p>--ig-radius-factor: 0</p>
+    <igx-chip class="chip1">
+      <igx-icon igxPrefix>place</igx-icon>
+      Country
+    </igx-chip>
+  </div>
+  <div class="chip-wrapper">
+    <p>--ig-radius-factor: 1</p>
+    <igx-chip class="chip2">
+      <igx-icon igxPrefix>location_city</igx-icon>
+      City
+    </igx-chip>
+  </div>
+</div>

src/app/theming/roundness/roundness-sample.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
+
+
+@Component({
+  selector: 'app-chip-simple',
+  styleUrls: ['./roundness-sample.component.css'],
+  templateUrl: './roundness-sample.component.html',
+  imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+
+export class RoundnessComponent {
+}

src/app/theming/theming-routes-data.ts

@@ -8,6 +8,7 @@ export const themingRoutesData = {
     'shadows-sample-2': { displayName: 'Shadows sample 2', parentName: 'Shadows' },
     // eslint-disable-next-line quote-props
     'density': { displayName: 'Display density sample', parentName: 'Themes' },
+    'roundness': { displayName: 'Roundness', parentName: 'Themes' },
     'angular-sample': { displayName: 'Angular Material Theming', parentName: 'Themes' },
     'bootstrap-sample': { displayName: 'Bootstrap Theming', parentName: 'Themes' },
     'card-sample-shadow': { displayName: 'card-sample-shadow', parentName: 'Shadows' }

src/app/theming/theming.routes.ts

@@ -5,6 +5,7 @@ import { AngularMaterialComponent } from './angular/angular-sample.component';
 import { BootstrapComponent } from './bootstrap/bootstrap-sample.component';
 import { DefaultThemeSampleComponent } from './default-theme-sample/default-theme-sample.component';
 import { DisplayDensityComponent } from './display-density/display-density.component';
+import { RoundnessComponent } from './roundness/roundness-sample.component';
 import { CardSampleShadowComponent} from './shadows/card-sample-shadow/card-sample-shadow';
 import { ShadowsSampleComponent } from './shadows/shadows-sample-1/shadows-sample.component';
 import { ShadowsSample2Component } from './shadows/shadows-sample-2/shadows-sample-2.component';
@@ -32,6 +33,11 @@ export const ThemingRoutes: Routes = [
         data: themingRoutesData['density'],
         path: 'density'
     },
+    {
+        component: RoundnessComponent,
+        data: themingRoutesData['roundness'],
+        path: 'roundness'
+    },
     {
         component: CardSampleShadowComponent,
         data: themingRoutesData['card-sample-shadow'],