feat(styling): add tailwind styling samples

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html

@@ -0,0 +1,18 @@
+<igx-list>
+  <igx-list-item [isHeader]="true">
+    Team Members (4)
+  </igx-list-item>
+  @for (member of members; track member) {
+    <igx-list-item>
+      <div class="wrapper">
+        <div>
+          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !material-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
+        </div>
+        <div class="contact-container">
+          <span class="contact-name">{{ member.name }}</span>
+        </div>
+      </div>
+    </igx-list-item>
+  }
+</igx-list>

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss

@@ -0,0 +1 @@
+@use "layout.scss";

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Member } from '../model/member.model';
+import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-badge-tailwind-styling-sample',
+    styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
+    templateUrl: './badge-tailwind-styling-sample.component.html',
+    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeTailwindStylingSampleComponent {
+  public members: Member[] = [
+    new Member('Terrance Orta', 'online'),
+    new Member('Donna Price', 'online'),
+    new Member('Lisa Landers', 'away'),
+    new Member('Dorothy H. Spencer', 'offline')
+  ];
+}

src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss

@@ -0,0 +1,18 @@
+.wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .contact-name {
+    font-weight: 600;
+  }
+
+  .contact-container{
+    margin-left: 20px;
+  }
+
+  .badge-style {
+    position: absolute;
+    bottom: 2.5px;
+    left: 40px;
+  }

src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html

@@ -0,0 +1,25 @@
+<igx-chips-area (reorder)="chipsOrderChanged($event)">
+  @for (chip of chipList; track chip) {
+    <igx-chip
+      class="!material-chip-color-[#99BAA6]
+      ![--remove-icon-color:#C92828]"
+      [id]="chip.id"
+      [selectable]="true"
+      [selectIcon]="mySelectIcon"
+      [removable]="true"
+      [removeIcon]="myRemoveIcon"
+      (remove)="chipRemoved($event)"
+      [draggable]="true">
+      <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
+      {{chip.text}}
+    </igx-chip>
+  }
+</igx-chips-area>
+
+<ng-template #mySelectIcon>
+  <igx-icon>check_circle</igx-icon>
+</ng-template>
+
+<ng-template #myRemoveIcon>
+  <igx-icon>delete</igx-icon>
+</ng-template>

src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss

@@ -0,0 +1 @@
+@use "layout.scss";

src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-chip-tailwind-styling',
+    styleUrls: ['./chip-tailwind-styling.component.scss'],
+    templateUrl: './chip-tailwind-styling.component.html',
+    imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective]
+})
+
+export class ChipTailwindStylingSampleComponent {
+    changeDetectionRef = inject(ChangeDetectorRef);
+
+    public chipList = [
+        {
+           text: 'Country',
+           id: '1',
+           icon: 'place'
+        },
+        {
+            text: 'City',
+            id: '2',
+            icon: 'location_city'
+        },
+        {
+            text: 'Town',
+            id: '3',
+            icon: 'store'
+        },
+        {
+            text: 'First Name',
+            id: '4',
+            icon: 'person_pin'
+        }
+    ];
+
+
+    public chipRemoved(event: IBaseChipEventArgs) {
+        this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
+        this.changeDetectionRef.detectChanges();
+    }
+
+    public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
+        const newChipList = [];
+        for (const chip of event.chipsArray) {
+            const chipItem = this.chipList.filter((item) => item.id === chip.id)[0];
+            newChipList.push(chipItem);
+        }
+        this.chipList = newChipList;
+    }
+}

src/app/data-display/chip/chip-tailwind-styling/layout.scss

@@ -0,0 +1,4 @@
+igx-chip {
+  margin-right: 5px;
+  margin-top: 20px;
+}

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

@@ -5,9 +5,11 @@ export const dataDisplayRoutesData = {
     "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
     "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
     "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
+    "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
     "chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
+    "chip-tailwind-styling": { displayName: "Chip Tailwind Styling", parentName: "Chip" },
     "circular-progressbar": { displayName: "Circular Progressbar Sample", parentName: "Circular Progressbar" },
     "circular-dynamic-sample": { displayName: "Circular Dynamic Sample", parentName: "Circular Progressbar" },
     // tslint:disable-next-line:max-line-length
@@ -16,6 +18,7 @@ export const dataDisplayRoutesData = {
     "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
     "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
+    "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
     "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
     "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
     "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },

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

@@ -2,9 +2,11 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
 import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
 import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component';
+import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
 import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component';
+import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component';
 import { CircularDynamicSampleComponent } from './circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component';
 // eslint-disable-next-line max-len
 import { CircularIndeterminateProgressbarComponent } from './circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component';
@@ -16,6 +18,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone
 import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
 import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
 import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
+import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component';
 import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
 import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
@@ -63,6 +66,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['badge-styling-sample'],
         path: 'badge-styling-sample'
     },
+    {
+        component: BadgeTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['badge-tailwind-styling-sample'],
+        path: 'badge-tailwind-styling-sample'
+    },
     {
         component: ChipAreaSampleComponent,
         data: dataDisplayRoutesData['chip-area-sample'],
@@ -208,11 +216,21 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['icon-styling'],
         path: 'icon-styling'
     },
+    {
+        component: IconTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['icon-tailwind-styling'],
+        path: 'icon-tailwind-styling'
+    },
     {
         component: ChipStylingSampleComponent,
         data: dataDisplayRoutesData['chip-styling'],
         path: 'chip-styling'
     },
+    {
+        component: ChipTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['chip-tailwind-styling'],
+        path: 'chip-tailwind-styling'
+    },
     {
         component: MaterialSymbolsComponent,
         data: dataDisplayRoutesData['material-symbols'],

src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html

@@ -0,0 +1 @@
+<igx-icon class="!material-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>

src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-icon-tailwind-styling-sample',
+    styleUrls: ['./icon-tailwind-styling-sample.component.scss'],
+    templateUrl: './icon-tailwind-styling-sample.component.html',
+    imports: [IgxIconComponent]
+})
+export class IconTailwindStylingSampleComponent { }

src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html

@@ -0,0 +1,8 @@
+<article class="sample-column">
+    <igx-buttongroup class="!material-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
+        <button igxButton igxRipple="white">Sofia</button>
+        <button igxButton igxRipple="white">London</button>
+        <button igxButton igxRipple="white">New York</button>
+        <button igxButton igxRipple="white" disabled>Tokyo</button>
+    </igx-buttongroup>
+</article>

src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-button-group-tailwind-style',
+    styleUrls: ['./button-group-tailwind-style.component.scss'],
+    templateUrl: './button-group-tailwind-style.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupTailwindStyleComponent {
+}

src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html

@@ -0,0 +1,14 @@
+<div class="buttons-sample">
+  <div class="button-sample">
+    <button igxButton="flat" class="!material-flat-button-color-[#7B9E89]">Flat Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="contained" class="!material-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="outlined" class="!material-outlined-button-color-[#7B9E89]">Outlined Button</button>
+  </div>
+  <div class="button-sample">
+    <button igxButton="fab" class="!material-fab-button-color-[#7B9E89]">Fab Button</button>
+  </div>
+</div>

src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.scss

@@ -0,0 +1 @@
+@use "layout.scss";

src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-buttons-tailwind-style',
+    styleUrls: ['./buttons-tailwind-style.component.scss'],
+    templateUrl: './buttons-tailwind-style.component.html',
+    imports: [IgxButtonDirective]
+})
+export class ButtonsTailwindStyleComponent {}

src/app/data-entries/buttons/buttons-tailwind-style/layout.scss

@@ -0,0 +1,9 @@
+.buttons-sample {
+  display: flex;
+  margin: 8px;
+}
+
+.button-sample {
+  display: flex;
+  margin-right: 16px;
+}

src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html

@@ -0,0 +1,3 @@
+<igx-checkbox class="!material-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
+    Styled checkbox
+</igx-checkbox>

src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxCheckboxComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-checkbox-tailwind-styling',
+    styleUrls: ['./checkbox-tailwind-styling.component.scss'],
+    templateUrl: './checkbox-tailwind-styling.component.html',
+    imports: [IgxCheckboxComponent]
+})
+export class CheckboxTailwindStylingComponent { }

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

@@ -9,6 +9,7 @@ export const dataEntriesRoutesData = {
     "button-group-sample-4": { displayName: "Selection Mode", parentName: "Button Group" },
     "button-group-sample-5": { displayName: "Display Density", parentName: "Button Group" },
     "button-group-style": { displayName: "Button Group Style", parentName: "Button Group" },
+    "button-group-tailwind-style": { displayName: "Button Group Tailwind Style", parentName: "Button Group" },
     "buttons-sample-1": { displayName: "Overview", parentName: "Buttons" },
     "buttons-sample-2": { displayName: "Flat Button", parentName: "Buttons" },
     "buttons-sample-3": { displayName: "Button Ripple", parentName: "Buttons" },
@@ -21,10 +22,12 @@ export const dataEntriesRoutesData = {
     "buttons-display-density": { displayName: "Display Density", parentName: "Buttons" },
     "buttons-roundness-sample": { displayName: "Components Roundness", parentName: "Buttons" },
     "buttons-style": { displayName: "Button Style", parentName: "Buttons" },
+    "buttons-tailwind-style": { displayName: "Button Tailwind Style", parentName: "Buttons" },
     "checkbox-sample-1": { displayName: "Simple Checkbox", parentName: "Checkbox" },
     "checkbox-sample-2": { displayName: "Multiple Checkboxes", parentName: "Checkbox" },
     "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" },
     "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" },
+    "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" },
     "dropdown-remote": { displayName: "Virtual Dropdown - Remote Data", parentName: "Dropdown" },
     "dropdown-virtual": { displayName: "Virtual Dropdown", parentName: "Dropdown" },
     "dropdown-menu": { displayName: "Dropdown as Menu", parentName: "Dropdown" },
@@ -45,28 +48,33 @@ export const dataEntriesRoutesData = {
     "svg-icon-button": { displayName: "SVG Icon Button", parentName: "Icon Buttons" },
     "icon-button-size": { displayName: "Icon Button Size", parentName: "Icon Buttons" },
     "icon-button-styling": { displayName: "Icon Button Styling", parentName: "Icon Buttons" },
+    "icon-button-tailwind-styling": { displayName: "Icon Button Tailwind Styling", parentName: "Icon Buttons" },
     "input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
     "input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
     "input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },
     "input-group-sample-4": { displayName: "Input Group Hint", parentName: "Input Group" },
     "input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
     "input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
     "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
+    "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
     "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },
     "radio-sample-1": { displayName: "Simple Radio Buttons", parentName: "Radio" },
     "radio-sample-2": { displayName: "Radio Button Binding", parentName: "Radio" },
     "radio-sample-3": { displayName: "Radio Label Position", parentName: "Radio" },
     "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" },
     "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" },
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
+    "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
     "switch-sample-1": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-sample-2": { displayName: "Multiple Switches", parentName: "Switch" },
     "switch-styling": { displayName: "Styled Switches", parentName: "Switch" },
+    "switch-tailwind-styling": { displayName: "Tailwind Styled Switches", parentName: "Switch" },
     "select-sample-1": { displayName: "Simple Select", parentName: "Select" },
     "select-sample-2": { displayName: "Select With Groups", parentName: "Select" },
     "select-sample-4": { displayName: "Custom Overlay Settings", parentName: "Select" },
     "select-styling": { displayName: "Select Styling", parentName: "Select" },
+    "select-tailwind-styling": { displayName: "Select Tailwind Styling", parentName: "Select" },
     "select-input-directives": { displayName: "Select Input Directives", parentName: "Select" },
     "select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" },
     "input-text-selection": { displayName: "Input with Text Selection", parentName: "Input Group" },