feat: chip

apps/docs/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { BottomNavigationPageComponent } from './pages/component-pages/bottom-na
 import { ButtonPageComponent } from './pages/component-pages/button-page/button-page.component';
 import { CardPageComponent } from './pages/component-pages/card-page/card-page.component';
 import { CheckBoxPageComponent } from './pages/component-pages/checkbox-page/checkbox-page.component';
+import { ChipPageComponent } from './pages/component-pages/chip-page/chip-page.component';
 import { DialogPageComponent } from './pages/component-pages/dialog-page/dialog-page.component';
 import { FormFieldPageComponent } from './pages/component-pages/form-field-page/form-field-page.component';
 import { IconPageComponent } from './pages/component-pages/icon-page/icon-page.component';
@@ -38,6 +39,10 @@ const routes: Routes = [
     path: 'components/checkbox',
     component: CheckBoxPageComponent,
   },
+  {
+    path: 'components/chip',
+    component: ChipPageComponent,
+  },
   {
     path: 'components/dialog',
     component: DialogPageComponent,

apps/docs/src/app/app.component.ts

@@ -60,6 +60,10 @@ export class AppComponent {
       link: 'components/checkbox',
       name: 'Checkbox',
     },
+    {
+      link: 'components/chip',
+      name: 'Chip',
+    },
     {
       link: 'components/dialog',
       name: 'Dialog',

apps/docs/src/app/app.module.ts

@@ -3,6 +3,7 @@ import {
   ButtonModule,
   CardModule,
   CheckboxModule,
+  ChipModule,
   FormFieldModule,
   IconModule,
   ListModule,
@@ -30,6 +31,7 @@ import { BottomNavigationExampleModule } from './examples/bottom-navigation/bott
 import { ButtonExamplesModule } from './examples/button/button-examples.module';
 import { CardExamplesModule } from './examples/card/card-examples.module';
 import { CheckBoxExamplesModule } from './examples/checkbox/checkbox-examples.module';
+import { ChipExamplesModule } from './examples/chip/chip-examples.module';
 import { FormFieldExamplesModule } from './examples/form-field/form-field-examples.module';
 import { IconExamplesModule } from './examples/icon/icon-examples.module';
 import { ItemGroupExamplesModule } from './examples/item-group/item-group-examples.module';
@@ -48,6 +50,7 @@ import { BottomNavigationPageComponent } from './pages/component-pages/bottom-na
 import { ButtonPageComponent } from './pages/component-pages/button-page/button-page.component';
 import { CardPageComponent } from './pages/component-pages/card-page/card-page.component';
 import { CheckBoxPageComponent } from './pages/component-pages/checkbox-page/checkbox-page.component';
+import { ChipPageComponent } from './pages/component-pages/chip-page/chip-page.component';
 import { DialogPageComponent } from './pages/component-pages/dialog-page/dialog-page.component';
 import { FormFieldPageComponent } from './pages/component-pages/form-field-page/form-field-page.component';
 import { IconPageComponent } from './pages/component-pages/icon-page/icon-page.component';
@@ -88,6 +91,7 @@ import { TooltipPageComponent } from './pages/component-pages/tooltip-page/toolt
     BottomNavigationPageComponent,
     SnackbarPageComponent,
     ItemGroupPageComponent,
+    ChipPageComponent,
   ],
   imports: [
     BrowserModule,
@@ -131,6 +135,8 @@ import { TooltipPageComponent } from './pages/component-pages/tooltip-page/toolt
     SnackbarModule,
     SnackbarExamplesModule,
     ItemGroupExamplesModule,
+    ChipModule,
+    ChipExamplesModule,
   ],
   providers: [
     {

apps/docs/src/app/examples/chip/appearances/appearances.component.html

@@ -0,0 +1,2 @@
+<anglify-chip>Filled</anglify-chip>
+<anglify-chip appearance="outlined">Outlined</anglify-chip>

apps/docs/src/app/examples/chip/appearances/appearances.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 1rem;
+}

apps/docs/src/app/examples/chip/appearances/appearances.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  templateUrl: './appearances.component.html',
+  styleUrls: ['./appearances.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppearancesComponent {}
+
+export default AppearancesComponent;

apps/docs/src/app/examples/chip/chip-examples.module.ts

@@ -0,0 +1,24 @@
+import { ChipModule, IconModule, ItemGroupModule } from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { AppearancesComponent } from './appearances/appearances.component';
+import { FilterComponent } from './filter/filter.component';
+import { GroupsComponent } from './groups/groups.component';
+import { MandatoryComponent } from './mandatory/mandatory.component';
+import { MultipleMandatoryComponent } from './multiple-mandatory/multiple-mandatory.component';
+import { MultipleComponent } from './multiple/multiple.component';
+import { SlotsComponent } from './slots/slots.component';
+
+@NgModule({
+  declarations: [
+    AppearancesComponent,
+    SlotsComponent,
+    GroupsComponent,
+    MandatoryComponent,
+    MultipleComponent,
+    FilterComponent,
+    MultipleMandatoryComponent,
+  ],
+  imports: [CommonModule, ChipModule, IconModule, ItemGroupModule],
+})
+export class ChipExamplesModule {}

apps/docs/src/app/examples/chip/filter/filter.component.html

@@ -0,0 +1,24 @@
+<anglify-item-group multiple>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()" filter>
+      <ng-template slot="prepend">
+        <anglify-icon icon="mdi-home" left></anglify-icon>
+      </ng-template>
+      Filled
+    </anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()" filter>Filled</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()" filter appearance="outlined">
+      <ng-template slot="prepend">
+        <anglify-icon icon="mdi-home" left></anglify-icon>
+      </ng-template>
+      <ng-template slot="append">
+        <anglify-icon icon="mdi-close-circle" right></anglify-icon>
+      </ng-template>
+      Outlined
+    </anglify-chip>
+  </ng-template>
+</anglify-item-group>

apps/docs/src/app/examples/chip/filter/filter.component.scss

@@ -0,0 +1,6 @@
+:host {
+  anglify-item-group {
+    display: flex;
+    gap: 1rem;
+  }
+}

apps/docs/src/app/examples/chip/filter/filter.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterComponent {}
+
+export default FilterComponent;

apps/docs/src/app/examples/chip/groups/groups.component.html

@@ -0,0 +1,19 @@
+<anglify-item-group>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">
+      <ng-template slot="prepend">
+        <anglify-icon icon="mdi-home" left></anglify-icon>
+      </ng-template>
+      Chip 1
+    </anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 2</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 3</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 4</anglify-chip>
+  </ng-template>
+</anglify-item-group>

apps/docs/src/app/examples/chip/groups/groups.component.scss

@@ -0,0 +1,6 @@
+:host {
+  anglify-item-group {
+    display: flex;
+    gap: 1rem;
+  }
+}

apps/docs/src/app/examples/chip/groups/groups.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GroupsComponent {}
+
+export default GroupsComponent;

apps/docs/src/app/examples/chip/mandatory/mandatory.component.html

@@ -0,0 +1,14 @@
+<anglify-item-group mandatory>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 1</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 2</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 3</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 4</anglify-chip>
+  </ng-template>
+</anglify-item-group>

apps/docs/src/app/examples/chip/mandatory/mandatory.component.scss

@@ -0,0 +1,6 @@
+:host {
+  anglify-item-group {
+    display: flex;
+    gap: 1rem;
+  }
+}

apps/docs/src/app/examples/chip/mandatory/mandatory.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './mandatory.component.html',
+  styleUrls: ['./mandatory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MandatoryComponent {}
+
+export default MandatoryComponent;

apps/docs/src/app/examples/chip/multiple-mandatory/multiple-mandatory.component.html

@@ -0,0 +1,14 @@
+<anglify-item-group multiple mandatory>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 1</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 2</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 3</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 4</anglify-chip>
+  </ng-template>
+</anglify-item-group>

apps/docs/src/app/examples/chip/multiple-mandatory/multiple-mandatory.component.scss

@@ -0,0 +1,6 @@
+:host {
+  anglify-item-group {
+    display: flex;
+    gap: 1rem;
+  }
+}

apps/docs/src/app/examples/chip/multiple-mandatory/multiple-mandatory.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './multiple-mandatory.component.html',
+  styleUrls: ['./multiple-mandatory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultipleMandatoryComponent {}
+
+export default MultipleMandatoryComponent;

apps/docs/src/app/examples/chip/multiple/multiple.component.html

@@ -0,0 +1,14 @@
+<anglify-item-group multiple>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 1</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 2</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 3</anglify-chip>
+  </ng-template>
+  <ng-template slot="item-group-item" let-active="active" let-toggle>
+    <anglify-chip [active]="active" (click)="toggle()">Chip 4</anglify-chip>
+  </ng-template>
+</anglify-item-group>

apps/docs/src/app/examples/chip/multiple/multiple.component.scss

@@ -0,0 +1,6 @@
+:host {
+  anglify-item-group {
+    display: flex;
+    gap: 1rem;
+  }
+}

apps/docs/src/app/examples/chip/multiple/multiple.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  templateUrl: './multiple.component.html',
+  styleUrls: ['./multiple.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultipleComponent {}
+
+export default MultipleComponent;

apps/docs/src/app/examples/chip/slots/slots.component.html

@@ -0,0 +1,27 @@
+<anglify-chip>
+  <ng-template slot="prepend">
+    <anglify-icon icon="mdi-home" left></anglify-icon>
+  </ng-template>
+  Icon left
+</anglify-chip>
+
+<anglify-chip>
+  <ng-template slot="append">
+    <anglify-icon icon="mdi-close-circle" right></anglify-icon>
+  </ng-template>
+  Icon right
+</anglify-chip>
+
+<anglify-chip appearance="outlined">
+  <ng-template slot="prepend">
+    <anglify-icon icon="mdi-home" left></anglify-icon>
+  </ng-template>
+  Icon left
+</anglify-chip>
+
+<anglify-chip appearance="outlined">
+  <ng-template slot="append">
+    <anglify-icon icon="mdi-close-circle" right></anglify-icon>
+  </ng-template>
+  Icon right
+</anglify-chip>

apps/docs/src/app/examples/chip/slots/slots.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  gap: 1rem;
+}

apps/docs/src/app/examples/chip/slots/slots.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'anglify-slots',
+  templateUrl: './slots.component.html',
+  styleUrls: ['./slots.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SlotsComponent {}
+
+export default SlotsComponent;

apps/docs/src/app/pages/component-pages/chip-page/chip-page.component.html

@@ -0,0 +1,28 @@
+<h1>Chip</h1>
+
+<h2>Examples</h2>
+
+<h3>Appearances</h3>
+<app-code-example component="chip" example="appearances"></app-code-example>
+
+<h3>Slots</h3>
+<app-code-example component="chip" example="slots"></app-code-example>
+
+<h3>Standard Group</h3>
+<app-code-example component="chip" example="groups"></app-code-example>
+
+<h3>Mandatory Chip</h3>
+<app-code-example component="chip" example="mandatory"></app-code-example>
+
+<h3>Multiple Selectable Chips</h3>
+<app-code-example component="chip" example="multiple"></app-code-example>
+
+<h3>Multiple Mandatory Selectable Chips</h3>
+<app-code-example component="chip" example="multiple-mandatory"></app-code-example>
+
+<h3>Filter</h3>
+<app-code-example component="chip" example="filter"></app-code-example>
+
+<h2>API</h2>
+<h3>Styling</h3>
+<app-styling-table forComponent="chip"></app-styling-table>

apps/docs/src/app/pages/component-pages/chip-page/chip-page.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'anglify-chip-page',
+  templateUrl: './chip-page.component.html',
+  styleUrls: ['./chip-page.component.scss'],
+})
+export class ChipPageComponent {}

libs/anglify/src/index.ts

@@ -15,6 +15,11 @@ export * from './modules/checkbox/tokens/checkbox.token';
 export * from './modules/checkbox/checkbox.component';
 export * from './modules/checkbox/functions/register-icons.function';
 export * from './modules/checkbox/checkbox.module';
+// Chip
+export * from './modules/chip/chip-settings.token';
+export * from './modules/chip/chip.interface';
+export * from './modules/chip/chip.component';
+export * from './modules/chip/chip.module';
 // Common
 export * from './modules/common/directives/slot/slot.directive';
 export * from './modules/common/directives/slot-outlet/slot-outlet.directive';