feat(chip): add chip examples

projects/demo/src/app/components-example/chip/chip-appearance-example/chip-appearance-example.component.html

@@ -0,0 +1,4 @@
+<div class="flex gap-ids-container-gap-4">
+  <ids-chip appearance="filled">Filled</ids-chip>
+  <ids-chip appearance="outlined">Outlined</ids-chip>
+</div>

projects/demo/src/app/components-example/chip/chip-appearance-example/chip-appearance-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-appearance-example',
+  imports: [IdsChipComponent],
+  templateUrl: './chip-appearance-example.component.html',
+})
+export class ChipAppearanceExampleComponent {}

projects/demo/src/app/components-example/chip/chip-examples.ts

@@ -0,0 +1,96 @@
+import { ChipAppearanceExampleComponent } from './chip-appearance-example/chip-appearance-example.component';
+import { ChipGroupExampleComponent } from './chip-group-example/chip-group-example.component';
+import { ChipIconExampleComponent } from './chip-icon-example/chip-icon-example.component';
+import { ChipInteractiveExampleComponent } from './chip-interactive-example/chip-interactive-example.component';
+import { ChipRemovableExampleComponent } from './chip-removable-example/chip-removable-example.component';
+import { ChipSizeExampleComponent } from './chip-size-example/chip-size-example.component';
+import { ChipVariantsExampleComponent } from './chip-variants-example/chip-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const CHIP_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'chip-appearances',
+    title: 'EXAMPLES.CHIP.APPEARANCES.TITLE',
+    description: 'EXAMPLES.CHIP.APPEARANCES.DESCRIPTION',
+    component: ChipAppearanceExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-appearance-example/chip-appearance-example.component.html',
+        TSpath: 'assets/examples/chip/chip-appearance-example/chip-appearance-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-variants',
+    title: 'EXAMPLES.CHIP.VARIANTS.TITLE',
+    description: 'EXAMPLES.CHIP.VARIANTS.DESCRIPTION',
+    component: ChipVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-variants-example/chip-variants-example.component.html',
+        TSpath: 'assets/examples/chip/chip-variants-example/chip-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-sizes',
+    title: 'EXAMPLES.CHIP.SIZES.TITLE',
+    description: 'EXAMPLES.CHIP.SIZES.DESCRIPTION',
+    component: ChipSizeExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-size-example/chip-size-example.component.html',
+        TSpath: 'assets/examples/chip/chip-size-example/chip-size-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-interactive',
+    title: 'EXAMPLES.CHIP.INTERACTIVE.TITLE',
+    description: 'EXAMPLES.CHIP.INTERACTIVE.DESCRIPTION',
+    component: ChipInteractiveExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-interactive-example/chip-interactive-example.component.html',
+        TSpath: 'assets/examples/chip/chip-interactive-example/chip-interactive-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-icon',
+    title: 'EXAMPLES.CHIP.ICONS.TITLE',
+    description: 'EXAMPLES.CHIP.ICONS.DESCRIPTION',
+    component: ChipIconExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-icon-example/chip-icon-example.component.html',
+        TSpath: 'assets/examples/chip/chip-icon-example/chip-icon-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-removable',
+    title: 'EXAMPLES.CHIP.REMOVABLE.TITLE',
+    description: 'EXAMPLES.CHIP.REMOVABLE.DESCRIPTION',
+    component: ChipRemovableExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-removable-example/chip-removable-example.component.html',
+        TSpath: 'assets/examples/chip/chip-removable-example/chip-removable-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'chip-group',
+    title: 'EXAMPLES.CHIP.CHIP_GROUP.TITLE',
+    description: 'EXAMPLES.CHIP.CHIP_GROUP.DESCRIPTION',
+    component: ChipGroupExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/chip/chip-group-example/chip-group-example.component.html',
+        TSpath: 'assets/examples/chip/chip-group-example/chip-group-example.component.ts',
+      },
+    ],
+  },
+];

projects/demo/src/app/components-example/chip/chip-group-example/chip-group-example.component.html

@@ -0,0 +1,13 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <ids-chip-group appearance="filled" size="compact">
+    <ids-chip variant="primary">Carrot</ids-chip>
+    <ids-chip variant="secondary">Onion</ids-chip>
+    <ids-chip variant="surface">Mushroom</ids-chip>
+  </ids-chip-group>
+
+  <ids-chip-group appearance="outlined" size="compact">
+    <button type="button" idsChip variant="primary">Carrot</button>
+    <button type="button" idsChip variant="secondary">Onion</button>
+    <button type="button" idsChip variant="surface">Mushroom</button>
+  </ids-chip-group>
+</div>

projects/demo/src/app/components-example/chip/chip-group-example/chip-group-example.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent, IdsChipGroupComponent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-group-example',
+  imports: [
+    IdsChipComponent,
+    IdsChipGroupComponent,
+  ],
+  templateUrl: './chip-group-example.component.html',
+})
+export class ChipGroupExampleComponent {}

projects/demo/src/app/components-example/chip/chip-icon-example/chip-icon-example.component.html

@@ -0,0 +1,24 @@
+<div class="flex gap-ids-container-gap-4">
+  <ids-chip>
+    <ids-avatar>
+      <img
+        idsAvatarImage
+        src="https://hips.hearstapps.com/harpersbazaaruk.cdnds.net/16/38/1600x1600/square-1474624165-scarlett-johansson.jpg"
+        alt="Scarlett Johansson"
+      />
+    </ids-avatar>
+    Avatar
+  </ids-chip>
+
+  <ids-chip>
+    <ids-icon fontIcon="key" idsLeadingIcon />
+    Leading icon
+  </ids-chip>
+
+  <ids-chip>
+    Trailing button
+    <button type="button" idsIconButton>
+      <ids-icon fontIcon="cart" />
+    </button>
+  </ids-chip>
+</div>

projects/demo/src/app/components-example/chip/chip-icon-example/chip-icon-example.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { IdsAvatarComponent, IdsAvatarImageDirective } from '@i-cell/ids-angular/avatar';
+import { IdsChipComponent } from '@i-cell/ids-angular/chip';
+import { IdsPrefixDirective } from '@i-cell/ids-angular/forms';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+
+@Component({
+  selector: 'app-chip-icon-example',
+  imports: [
+    IdsAvatarComponent,
+    IdsAvatarImageDirective,
+    IdsChipComponent,
+    IdsPrefixDirective,
+    IdsIconComponent,
+    IdsIconButtonComponent,
+  ],
+  templateUrl: './chip-icon-example.component.html',
+})
+export class ChipIconExampleComponent {}

projects/demo/src/app/components-example/chip/chip-interactive-example/chip-interactive-example.component.html

@@ -0,0 +1,5 @@
+<div class="flex gap-ids-container-gap-4">
+  <ids-chip>Non-interactive</ids-chip>
+  <button type="button" idsChip>Interactive</button>
+  <button type="button" idsChip [disabled]="true">Disabled</button>
+</div>

projects/demo/src/app/components-example/chip/chip-interactive-example/chip-interactive-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-interactive-example',
+  imports: [IdsChipComponent],
+  templateUrl: './chip-interactive-example.component.html',
+})
+export class ChipInteractiveExampleComponent {}

projects/demo/src/app/components-example/chip/chip-removable-example/chip-removable-example.component.html

@@ -0,0 +1,7 @@
+<div class="flex gap-ids-container-gap-4">
+  @for (chip of chips; track chip) {
+    <button type="button" idsChip [removable]="true" (removed)="onRemoved($event, $index)">
+      {{ chip }}
+    </button>
+  }
+</div>

projects/demo/src/app/components-example/chip/chip-removable-example/chip-removable-example.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent, IdsChipRemoveEvent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-removable-example',
+  imports: [IdsChipComponent],
+  templateUrl: './chip-removable-example.component.html',
+})
+export class ChipRemovableExampleComponent {
+  public chips = [
+    'Carrot',
+    'Onion',
+    'Mushroom',
+  ];
+
+  public onRemoved(event: IdsChipRemoveEvent, index: number): void {
+    console.info('chip removed:', event.chip.id());
+    this.chips = this.chips.toSpliced(index, 1);
+  }
+}

projects/demo/src/app/components-example/chip/chip-size-example/chip-size-example.component.html

@@ -0,0 +1,6 @@
+<div class="flex gap-ids-container-gap-4">
+  <ids-chip size="dense">Dense</ids-chip>
+  <ids-chip size="compact">Compact</ids-chip>
+  <ids-chip size="comfortable">Comfortable</ids-chip>
+  <ids-chip size="spacious">Spacious</ids-chip>
+</div>

projects/demo/src/app/components-example/chip/chip-size-example/chip-size-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-size-example',
+  imports: [IdsChipComponent],
+  templateUrl: './chip-size-example.component.html',
+})
+export class ChipSizeExampleComponent {}

projects/demo/src/app/components-example/chip/chip-variants-example/chip-variants-example.component.html

@@ -0,0 +1,7 @@
+<div class="flex gap-ids-container-gap-4">
+  <ids-chip variant="primary">Primary</ids-chip>
+  <ids-chip variant="secondary">Secondary</ids-chip>
+  <ids-chip variant="surface">Surface</ids-chip>
+  <ids-chip variant="light">Light</ids-chip>
+  <ids-chip variant="dark">Dark</ids-chip>
+</div>

projects/demo/src/app/components-example/chip/chip-variants-example/chip-variants-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsChipComponent } from '@i-cell/ids-angular/chip';
+
+@Component({
+  selector: 'app-chip-variants-example',
+  imports: [IdsChipComponent],
+  templateUrl: './chip-variants-example.component.html',
+})
+export class ChipVariantsExampleComponent {}

projects/demo/src/app/pages/button/button-demo.component.html

@@ -92,4 +92,4 @@ <h2>{{ "COMMON.GROUPED" | translate }}</h2>
   @for (example of buttonExamples; track example.id) {
     <ids-example-viewer [example]="example" />
   }
-</div>
+</div>

projects/demo/src/app/pages/chip/chip-demo.component.html

@@ -163,3 +163,9 @@ <h2>{{ "COMMON.GROUPED" | translate }}</h2>
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6 pb-2">
+  @for (example of chipExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>

projects/demo/src/app/pages/chip/chip-demo.component.ts

@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { CHIP_EXAMPLES } from '../../components-example/chip/chip-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -29,6 +31,7 @@ import { TranslateModule } from '@ngx-translate/core';
     DemoAndCodeComponent,
     TryoutControlComponent,
     ControlTableComponent,
+    IdsExampleViewerComponent,
   ],
   templateUrl: './chip-demo.component.html',
   styleUrls: [
@@ -38,4 +41,5 @@ import { TranslateModule } from '@ngx-translate/core';
 })
 export class ChipDemoComponent {
   protected _chipDemoService = inject(ChipDemoService);
+  public readonly chipExamples = CHIP_EXAMPLES;
 }

projects/demo/src/assets/i18n/en.json

@@ -294,6 +294,36 @@
           "FOOTER_BUTTON": "Learn more"
         }
       }
+    },
+    "CHIP": {
+      "APPEARANCES": {
+        "TITLE": "Chip appearances",
+        "DESCRIPTION": "The two chip appearances: filled (default) and outlined."
+      },
+      "VARIANTS": {
+        "TITLE": "Chip variants",
+        "DESCRIPTION": "Chips with different color variants: primary, secondary, surface (default), light, and dark."
+      },
+      "SIZES": {
+        "TITLE": "Chip sizes",
+        "DESCRIPTION": "Chips with different sizes: dense, compact (default), comfortable and spacious."
+      },
+      "INTERACTIVE": {
+        "TITLE": "Interactive chips",
+        "DESCRIPTION": "Use the ids-chip element for non-interactive chips, or the button[idsChip] selector for interactive chips. Interactive chips can also be disabled."
+      },
+      "ICONS": {
+        "TITLE": "Chip with icons",
+        "DESCRIPTION": "Chips can include an avatar, a leading icon, and/or a trailing icon button."
+      },
+      "REMOVABLE": {
+        "TITLE": "Removable chips",
+        "DESCRIPTION": "Interactive chips can be made removable. The removed event is emitted when the close button is clicked."
+      },
+      "CHIP_GROUP": {
+        "TITLE": "Chip group",
+        "DESCRIPTION": "Chips can be grouped together. Appearance, size and disabled state are inherited from the group."
+      }
     }
   }
 }

projects/demo/src/assets/i18n/hu.json

@@ -290,6 +290,36 @@
           "FOOTER_BUTTON": "Tudj meg többet"
         }
       }
+    },
+    "CHIP": {
+      "APPEARANCES": {
+        "TITLE": "Chip megjelenései",
+        "DESCRIPTION": "A chip komponens megjelenései: filled (alapértelmezett) és outlined."
+      },
+      "VARIANTS": {
+        "TITLE": "Chip változatai",
+        "DESCRIPTION": "A chip komponens különböző változatai: primary, secondary, surface (alapértelmezett), light és dark."
+      },
+      "SIZES": {
+        "TITLE": "Chip méretei",
+        "DESCRIPTION": "A chip komponens különböző méretei: dense, compact (alapértelmezett), comfortable és spacious."
+      },
+      "INTERACTIVE": {
+        "TITLE": "Interaktív chipek",
+        "DESCRIPTION": "A nem interaktív chipekhez az ids-chip elemet, az interaktív chipekhez a button[idsChip] selectort használja. Az interaktív chipek letilthatók."
+      },
+      "ICONS": {
+        "TITLE": "Chip ikonokkal",
+        "DESCRIPTION": "A chip komponens tartalmazhat avatart, leading ikont és/vagy trailing icon gombot."
+      },
+      "REMOVABLE": {
+        "TITLE": "Eltávolítható chipek",
+        "DESCRIPTION": "Az interaktív chipek eltávolíthatóvá tehetők. A close gomb megnyomásakor a removed esemény emittálódik."
+      },
+      "CHIP_GROUP": {
+        "TITLE": "Chip-group",
+        "DESCRIPTION": "A chipek csoportosíthatók. A megjelenés, a méret és a disabled állapot a csoporttól öröklődik."
+      }
     }
   }