From e1beb7f37d8bce2179742ed7ef35c66023349346 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 7 Oct 2026 12:10:10 +0300 Subject: [PATCH 1/5] feat(chip): update samples for new docs --- live-editing/configs/ChipConfigGenerator.ts | 41 +++++- package-lock.json | 133 ------------------ .../chip-area-sample.component.html | 30 ---- .../chip-area-sample.component.scss | 13 -- .../chip-area-sample.component.ts | 49 ------- .../chip/chip-area/chip-area.component.html | 5 + .../chip/chip-area/chip-area.component.scss | 15 ++ .../chip/chip-area/chip-area.component.ts | 12 ++ .../chip-interaction-state.component.html | 8 ++ .../chip-interaction-state.component.scss | 28 ++++ .../chip-interaction-state.component.ts | 10 ++ .../chip-layout/chip-layout.component.html | 26 ++++ .../chip-layout/chip-layout.component.scss | 29 ++++ .../chip/chip-layout/chip-layout.component.ts | 12 ++ .../chip-overview.component.html | 25 ++++ .../chip-overview.component.scss | 52 +++++++ .../chip-overview/chip-overview.component.ts | 21 +++ .../chip-remove/chip-remove.component.html | 10 ++ .../chip-remove/chip-remove.component.scss | 40 ++++++ .../chip/chip-remove/chip-remove.component.ts | 29 ++++ .../chip-simple/chip-simple.component.html | 13 -- .../chip-simple/chip-simple.component.scss | 7 - .../chip/chip-simple/chip-simple.component.ts | 45 ------ .../chip/chip-size/chip-size.component.html | 24 ++++ .../chip/chip-size/chip-size.component.scss | 38 +++++ .../chip/chip-size/chip-size.component.ts | 12 ++ .../chip/chip-state/chip-state.component.html | 28 ++++ .../chip/chip-state/chip-state.component.scss | 42 ++++++ .../chip/chip-state/chip-state.component.ts | 12 ++ .../chip-styling/chip-styling.component.html | 22 +-- .../chip-styling/chip-styling.component.scss | 98 +++++++------ .../chip-styling/chip-styling.component.ts | 57 +++----- .../chip/chip-styling/layout.scss | 7 - .../chip-tailwind-styling.component.html | 63 +++++---- .../chip-tailwind-styling.component.scss | 21 ++- .../chip-tailwind-styling.component.ts | 96 ++++++++----- .../chip/chip-tailwind-styling/icons.ts | 13 ++ .../chip/chip-tailwind-styling/layout.scss | 4 - .../chip/chip-types/chip-types.component.html | 8 ++ .../chip/chip-types/chip-types.component.scss | 28 ++++ .../chip/chip-types/chip-types.component.ts | 10 ++ .../data-display/data-display-routes-data.ts | 10 +- src/app/data-display/data-display.routes.ts | 52 +++++-- 43 files changed, 826 insertions(+), 472 deletions(-) delete mode 100644 src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html delete mode 100644 src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss delete mode 100644 src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts create mode 100644 src/app/data-display/chip/chip-area/chip-area.component.html create mode 100644 src/app/data-display/chip/chip-area/chip-area.component.scss create mode 100644 src/app/data-display/chip/chip-area/chip-area.component.ts create mode 100644 src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.html create mode 100644 src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.scss create mode 100644 src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts create mode 100644 src/app/data-display/chip/chip-layout/chip-layout.component.html create mode 100644 src/app/data-display/chip/chip-layout/chip-layout.component.scss create mode 100644 src/app/data-display/chip/chip-layout/chip-layout.component.ts create mode 100644 src/app/data-display/chip/chip-overview/chip-overview.component.html create mode 100644 src/app/data-display/chip/chip-overview/chip-overview.component.scss create mode 100644 src/app/data-display/chip/chip-overview/chip-overview.component.ts create mode 100644 src/app/data-display/chip/chip-remove/chip-remove.component.html create mode 100644 src/app/data-display/chip/chip-remove/chip-remove.component.scss create mode 100644 src/app/data-display/chip/chip-remove/chip-remove.component.ts delete mode 100644 src/app/data-display/chip/chip-simple/chip-simple.component.html delete mode 100644 src/app/data-display/chip/chip-simple/chip-simple.component.scss delete mode 100644 src/app/data-display/chip/chip-simple/chip-simple.component.ts create mode 100644 src/app/data-display/chip/chip-size/chip-size.component.html create mode 100644 src/app/data-display/chip/chip-size/chip-size.component.scss create mode 100644 src/app/data-display/chip/chip-size/chip-size.component.ts create mode 100644 src/app/data-display/chip/chip-state/chip-state.component.html create mode 100644 src/app/data-display/chip/chip-state/chip-state.component.scss create mode 100644 src/app/data-display/chip/chip-state/chip-state.component.ts delete mode 100644 src/app/data-display/chip/chip-styling/layout.scss create mode 100644 src/app/data-display/chip/chip-tailwind-styling/icons.ts delete mode 100644 src/app/data-display/chip/chip-tailwind-styling/layout.scss create mode 100644 src/app/data-display/chip/chip-types/chip-types.component.html create mode 100644 src/app/data-display/chip/chip-types/chip-types.component.scss create mode 100644 src/app/data-display/chip/chip-types/chip-types.component.ts diff --git a/live-editing/configs/ChipConfigGenerator.ts b/live-editing/configs/ChipConfigGenerator.ts index 4628a00205..01a74871d2 100644 --- a/live-editing/configs/ChipConfigGenerator.ts +++ b/live-editing/configs/ChipConfigGenerator.ts @@ -10,7 +10,43 @@ export class ChipConfigGenerator implements IConfigGenerator { const configs = new Array(); configs.push(new Config({ - component: 'ChipSimpleComponent', + component: 'ChipOverviewComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipLayoutComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipTypesComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipSizeComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipInteractionStateComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipStateComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/" + })); + + configs.push(new Config({ + component: 'ChipRemoveComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/" })); @@ -28,14 +64,13 @@ export class ChipConfigGenerator implements IConfigGenerator { })); configs.push(new Config({ - component: 'ChipAreaSampleComponent', + component: 'ChipAreaComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/" })); configs.push(new Config({ component: 'ChipStylingSampleComponent', - additionalFiles: ["/src/app/data-display/chip/chip-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/" })); diff --git a/package-lock.json b/package-lock.json index 153b01495f..5474c237f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -643,7 +643,6 @@ "arm" ], "dev": true, - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -661,7 +660,6 @@ "arm64" ], "dev": true, - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -679,7 +677,6 @@ "arm" ], "dev": true, - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -697,7 +694,6 @@ "arm64" ], "dev": true, - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -715,7 +711,6 @@ "riscv64" ], "dev": true, - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -733,7 +728,6 @@ "x64" ], "dev": true, - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -751,7 +745,6 @@ "riscv64" ], "dev": true, - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -769,7 +762,6 @@ "x64" ], "dev": true, - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -4126,9 +4118,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4146,9 +4135,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4166,9 +4152,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4186,9 +4169,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4206,9 +4186,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4226,9 +4203,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4246,9 +4220,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4491,9 +4462,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4511,9 +4479,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4531,9 +4496,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4551,9 +4513,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4571,9 +4530,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4591,9 +4547,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4611,9 +4564,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4631,9 +4581,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4843,9 +4790,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4866,9 +4810,6 @@ "cpu": [ "arm" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4889,9 +4830,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4912,9 +4850,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4935,9 +4870,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4958,9 +4890,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5148,9 +5077,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5168,9 +5094,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5188,9 +5111,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5208,9 +5128,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5228,9 +5145,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5248,9 +5162,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5604,9 +5515,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5623,9 +5531,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5642,9 +5547,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5661,9 +5563,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -12567,9 +12466,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -12590,9 +12486,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -12613,9 +12506,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -12636,9 +12526,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -15208,7 +15095,6 @@ "cpu": [ "arm" ], - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -15225,7 +15111,6 @@ "cpu": [ "arm64" ], - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -15242,7 +15127,6 @@ "cpu": [ "arm" ], - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -15259,7 +15143,6 @@ "cpu": [ "arm64" ], - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -15276,7 +15159,6 @@ "cpu": [ "riscv64" ], - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -15293,7 +15175,6 @@ "cpu": [ "x64" ], - "libc": "musl", "license": "MIT", "optional": true, "os": [ @@ -15310,7 +15191,6 @@ "cpu": [ "riscv64" ], - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -15327,7 +15207,6 @@ "cpu": [ "x64" ], - "libc": "glibc", "license": "MIT", "optional": true, "os": [ @@ -17439,9 +17318,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -17463,9 +17339,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -17487,9 +17360,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -17511,9 +17381,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html deleted file mode 100644 index 8cb74d3079..0000000000 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html +++ /dev/null @@ -1,30 +0,0 @@ -
- - @for (chip of chipList; track chip) { - - - {{chip.name}} - - } - -
- - - check_circle - - - - delete - diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss deleted file mode 100644 index 8c1bf8489e..0000000000 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -igx-chip { - margin-right: 5px; -} - -.chip-avatar-resized { - width: 2em; - height: 2em; - min-width: 2em; -} - -.sample-container { - padding: 1rem 0 0 1rem; -} diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts deleted file mode 100644 index 6f3cf48ddc..0000000000 --- a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-chip-area-sample', - styleUrls: ['./chip-area-sample.component.scss'], - templateUrl: './chip-area-sample.component.html', - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent] -}) - -export class ChipAreaSampleComponent { - changeDetectionRef = inject(ChangeDetectorRef); - - public chipList = [ - { - id: '770-504-2217', - name: 'Terrance Orta', - photo: 'assets/images/men/27.jpg' - }, - { - id: '423-676-2869', - name: 'Richard Mahoney', - photo: 'assets/images/men/13.jpg' - }, - { - id: '859-496-2817', - name: 'Donna Price', - photo: 'assets/images/women/50.jpg' - } - ]; - - 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; - } -} diff --git a/src/app/data-display/chip/chip-area/chip-area.component.html b/src/app/data-display/chip/chip-area/chip-area.component.html new file mode 100644 index 0000000000..d2a6b57296 --- /dev/null +++ b/src/app/data-display/chip/chip-area/chip-area.component.html @@ -0,0 +1,5 @@ + + @for (label of chips; track $index) { + {{ label }} + } + diff --git a/src/app/data-display/chip/chip-area/chip-area.component.scss b/src/app/data-display/chip/chip-area/chip-area.component.scss new file mode 100644 index 0000000000..ed8b7b0012 --- /dev/null +++ b/src/app/data-display/chip/chip-area/chip-area.component.scss @@ -0,0 +1,15 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +igx-chips-area { + --ig-size: var(--ig-size-large); + + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.25rem; +} diff --git a/src/app/data-display/chip/chip-area/chip-area.component.ts b/src/app/data-display/chip/chip-area/chip-area.component.ts new file mode 100644 index 0000000000..c8eed4d277 --- /dev/null +++ b/src/app/data-display/chip/chip-area/chip-area.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; + +@Component({ + selector: 'app-chip-area', + templateUrl: './chip-area.component.html', + styleUrls: ['./chip-area.component.scss'], + imports: [IgxChipComponent, IgxChipsAreaComponent] +}) +export class ChipAreaComponent { + public chips = ['Chip', 'Chip', 'Chip']; +} diff --git a/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.html b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.html new file mode 100644 index 0000000000..3546d1d3eb --- /dev/null +++ b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.html @@ -0,0 +1,8 @@ +
+ Enabled + Chip +
+
+ Disabled + Chip +
diff --git a/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.scss b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.scss new file mode 100644 index 0000000000..7002e99597 --- /dev/null +++ b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.scss @@ -0,0 +1,28 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.chip-states-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.chip-states-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts new file mode 100644 index 0000000000..c84d2ea89d --- /dev/null +++ b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; + +@Component({ + selector: 'app-chip-interaction-state', + templateUrl: './chip-interaction-state.component.html', + styleUrls: ['./chip-interaction-state.component.scss'], + imports: [IgxChipComponent] +}) +export class ChipInteractionStateComponent { } diff --git a/src/app/data-display/chip/chip-layout/chip-layout.component.html b/src/app/data-display/chip/chip-layout/chip-layout.component.html new file mode 100644 index 0000000000..25dbc4fe86 --- /dev/null +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.html @@ -0,0 +1,26 @@ +
+ Text + Chip +
+
+ Prefix + + arrow_upward + Chip + +
+
+ Prefix+Suffix + + arrow_upward + Chip + account_circle + +
+
+ Suffix + + Chip + account_circle + +
diff --git a/src/app/data-display/chip/chip-layout/chip-layout.component.scss b/src/app/data-display/chip/chip-layout/chip-layout.component.scss new file mode 100644 index 0000000000..0d412509f5 --- /dev/null +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.scss @@ -0,0 +1,29 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.chip-layout-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.chip-layout-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/src/app/data-display/chip/chip-layout/chip-layout.component.ts b/src/app/data-display/chip/chip-layout/chip-layout.component.ts new file mode 100644 index 0000000000..8d7e6b68fc --- /dev/null +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-chip-layout', + templateUrl: './chip-layout.component.html', + styleUrls: ['./chip-layout.component.scss'], + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective] +}) +export class ChipLayoutComponent { } diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.html b/src/app/data-display/chip/chip-overview/chip-overview.component.html new file mode 100644 index 0000000000..1f87fcdfb5 --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.html @@ -0,0 +1,25 @@ +
+
+ Name + + + +
+
+ Skills · {{ selectedSkills.length }} selected +
+ @for (skill of skills; track skill) { + + {{ skill }} + + } +
+
+
+ +
+
diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.scss b/src/app/data-display/chip/chip-overview/chip-overview.component.scss new file mode 100644 index 0000000000..abb4c518c6 --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.scss @@ -0,0 +1,52 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; + box-sizing: border-box; +} + +.profile-card { + --ig-size: var(--ig-size-medium); + + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 1rem; + width: 21.875rem; + padding: 1rem; + border: 1px solid var(--ig-gray-200); + border-radius: 0.25rem; + background: var(--ig-surface-500); +} + +.section-header { + display: flex; + align-items: center; + height: 2rem; + padding-inline: 1rem; + color: var(--ig-secondary-500); + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); +} + +.name-input { + --ig-size: var(--ig-size-small); +} + +.skills { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.25rem; +} + +.actions { + display: flex; + justify-content: flex-end; +} diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.ts b/src/app/data-display/chip/chip-overview/chip-overview.component.ts new file mode 100644 index 0000000000..d68e0f7122 --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-chip-overview', + templateUrl: './chip-overview.component.html', + styleUrls: ['./chip-overview.component.scss'], + imports: [IgxButtonDirective, IgxChipComponent, IgxInputDirective, IgxInputGroupComponent] +}) +export class ChipOverviewComponent { + public skills = ['Figma', 'React', 'CSS', 'Prototyping', 'Motion Design']; + public selectedSkills: string[] = []; + + public toggleSkill(skill: string, selected: boolean) { + this.selectedSkills = selected + ? [...this.selectedSkills, skill] + : this.selectedSkills.filter((item) => item !== skill); + } +} diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.html b/src/app/data-display/chip/chip-remove/chip-remove.component.html new file mode 100644 index 0000000000..958441e8b5 --- /dev/null +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.html @@ -0,0 +1,10 @@ +
+ Remove Chip +
+ @if (isVisible) { + Chip + } @else { + + } +
+
diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.scss b/src/app/data-display/chip/chip-remove/chip-remove.component.scss new file mode 100644 index 0000000000..50ee079bb7 --- /dev/null +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.scss @@ -0,0 +1,40 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.chip-remove-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +/* A row as tall as the chip. The restore button can be taller in some themes, so it + overflows the row evenly instead of resizing the sample when it replaces the chip. */ +.chip-remove-slot { + display: flex; + align-items: center; + justify-content: center; + height: 1.5rem; +} + +.restore-button { + --ig-size: var(--ig-size-small); +} + +.chip-remove-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.ts b/src/app/data-display/chip/chip-remove/chip-remove.component.ts new file mode 100644 index 0000000000..a47f988db4 --- /dev/null +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.ts @@ -0,0 +1,29 @@ +import { Component, ElementRef, Injector, ViewChild, afterNextRender, inject } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-chip-remove', + templateUrl: './chip-remove.component.html', + styleUrls: ['./chip-remove.component.scss'], + imports: [IgxButtonDirective, IgxChipComponent] +}) +export class ChipRemoveComponent { + @ViewChild('chip', { read: ElementRef }) private chip?: ElementRef; + @ViewChild('restore') private restore?: ElementRef; + + public isVisible = true; + private injector = inject(Injector); + + public toggleChip(visible: boolean) { + this.isVisible = visible; + + // The control the user activated is gone, so move focus to the one that replaced it. + afterNextRender(() => { + const target = visible + ? this.chip?.nativeElement.querySelector('.igx-chip__remove') + : this.restore?.nativeElement; + target?.focus(); + }, { injector: this.injector }); + } +} diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.html b/src/app/data-display/chip/chip-simple/chip-simple.component.html deleted file mode 100644 index 47ce50e55d..0000000000 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
- @for (chip of chipList; track chip) { - - {{chip.icon}} - {{chip.text}} - - } -
diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.scss b/src/app/data-display/chip/chip-simple/chip-simple.component.scss deleted file mode 100644 index 5e88f1179e..0000000000 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -igx-chip { - margin-right: 5px; -} - -.sample-container { - padding: 1rem 0 0 1rem; -} diff --git a/src/app/data-display/chip/chip-simple/chip-simple.component.ts b/src/app/data-display/chip/chip-simple/chip-simple.component.ts deleted file mode 100644 index 3d5d9d6294..0000000000 --- a/src/app/data-display/chip/chip-simple/chip-simple.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; -import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; - - -@Component({ - selector: 'app-chip-simple', - styleUrls: ['./chip-simple.component.scss'], - templateUrl: './chip-simple.component.html', - imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] -}) - -export class ChipSimpleComponent { - 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(); - } -} diff --git a/src/app/data-display/chip/chip-size/chip-size.component.html b/src/app/data-display/chip/chip-size/chip-size.component.html new file mode 100644 index 0000000000..2e06232cea --- /dev/null +++ b/src/app/data-display/chip/chip-size/chip-size.component.html @@ -0,0 +1,24 @@ +
+ Small + + arrow_upward + Chip + account_circle + +
+
+ Medium + + arrow_upward + Chip + account_circle + +
+
+ Large + + arrow_upward + Chip + account_circle + +
diff --git a/src/app/data-display/chip/chip-size/chip-size.component.scss b/src/app/data-display/chip/chip-size/chip-size.component.scss new file mode 100644 index 0000000000..f5a91c586a --- /dev/null +++ b/src/app/data-display/chip/chip-size/chip-size.component.scss @@ -0,0 +1,38 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.chip-size-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.chip-size-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); +} diff --git a/src/app/data-display/chip/chip-size/chip-size.component.ts b/src/app/data-display/chip/chip-size/chip-size.component.ts new file mode 100644 index 0000000000..cb49dfd318 --- /dev/null +++ b/src/app/data-display/chip/chip-size/chip-size.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-chip-size', + templateUrl: './chip-size.component.html', + styleUrls: ['./chip-size.component.scss'], + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective] +}) +export class ChipSizeComponent { } diff --git a/src/app/data-display/chip/chip-state/chip-state.component.html b/src/app/data-display/chip/chip-state/chip-state.component.html new file mode 100644 index 0000000000..f773ff6250 --- /dev/null +++ b/src/app/data-display/chip/chip-state/chip-state.component.html @@ -0,0 +1,28 @@ +
+ Idle + + arrow_upward + Chip + +
+
+ Hover + + arrow_upward + Chip + +
+
+ Focused + + arrow_upward + Chip + +
+
+ Selected + + arrow_upward + Chip + +
diff --git a/src/app/data-display/chip/chip-state/chip-state.component.scss b/src/app/data-display/chip/chip-state/chip-state.component.scss new file mode 100644 index 0000000000..1c6c5ee202 --- /dev/null +++ b/src/app/data-display/chip/chip-state/chip-state.component.scss @@ -0,0 +1,42 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 2.5rem; + height: 100%; +} + +.chip-state-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.chip-state-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} + +// Hover and focus only happen on interaction, so these chips show the colors the theme uses for them. +:host ::ng-deep igx-chip.state-hover .igx-chip__item { + background: var(--hover-background); + color: var(--hover-text-color); +} + +// The focus ring color is transparent in themes that show focus through the background alone. +:host ::ng-deep igx-chip.state-focused .igx-chip__item { + background: var(--focus-background); + color: var(--focus-text-color); + outline: 0.25rem solid var(--focus-shadow-color); +} diff --git a/src/app/data-display/chip/chip-state/chip-state.component.ts b/src/app/data-display/chip/chip-state/chip-state.component.ts new file mode 100644 index 0000000000..44be141abf --- /dev/null +++ b/src/app/data-display/chip/chip-state/chip-state.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-chip-state', + templateUrl: './chip-state.component.html', + styleUrls: ['./chip-state.component.scss'], + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] +}) +export class ChipStateComponent { } diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index 7d388ed335..c86fb77fe3 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.html +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.html @@ -1,8 +1,14 @@ - - @for (chip of chipList; track chip) { - - - {{chip.text}} - - } - + + Prototyping + + + Motion Design + + + Sony Headphones + + + + + Simon and Lisa + diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.scss b/src/app/data-display/chip/chip-styling/chip-styling.component.scss index 9f9b4b01b2..b1da483d89 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.scss +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.scss @@ -1,56 +1,64 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -igx-chips-area { +:host { --ig-size: var(--ig-size-medium); - gap: rem(8px); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 1.875rem; + height: 100%; } -igx-icon { - --ig-icon-size: #{rem(13px)}; +// Default chip +.tag-chip { + --ig-chip-background: var(--ig-error-50); + --ig-chip-text-color: var(--ig-error-50-contrast); + --ig-chip-hover-background: var(--ig-error-100); + --ig-chip-hover-text-color: var(--ig-error-100-contrast); + --ig-chip-focus-background: var(--ig-error-200); + --ig-chip-focus-text-color: var(--ig-error-200-contrast); + --ig-chip-remove-icon-color: var(--ig-error-500); + --ig-chip-remove-icon-color-focus: var(--ig-error-500); } -// CSS variables approach -igx-chip { - --text-color: #fff; - --hover-text-color: #fff; - --focus-text-color: #fff; - --border-radius: #{rem(5px)}; - - &.xcom { - --background: #000; - --hover-background: #000; - --focus-background: #323232; - } +// Selected chip +.filter-chip { + --ig-chip-selected-background: var(--ig-primary-50); + --ig-chip-selected-text-color: var(--ig-primary-50-contrast); + --ig-chip-hover-selected-background: var(--ig-primary-100); + --ig-chip-hover-selected-text-color: var(--ig-primary-100-contrast); + --ig-chip-focus-selected-background: var(--ig-primary-200); + --ig-chip-focus-selected-text-color: var(--ig-primary-200-contrast); +} - &.youtube { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; - } +// The start element holds the select icon. +:host ::ng-deep .filter-chip .igx-chip__start { + color: var(--ig-primary-500); +} - &.facebook { - --background: #3b5999; - --hover-background: #3b5999; - --focus-background: #2c4378; - } +// Outlined chips +.product-chip { + --ig-chip-outlined-background: var(--ig-surface-500); + --ig-chip-outlined-text-color: var(--ig-gray-700); + --ig-chip-border-color: var(--ig-gray-700); + --ig-chip-hover-outlined-text-color: var(--ig-gray-800); + --ig-chip-hover-border-color: var(--ig-gray-800); + --ig-chip-focus-outlined-text-color: var(--ig-gray-900); + --ig-chip-focus-border-color: var(--ig-gray-900); +} - &.linkedin { - --background: #55acee; - --hover-background: #55acee; - --focus-background: #4682af; - } +.contact-chip { + --ig-chip-outlined-background: var(--ig-secondary-100); + --ig-chip-outlined-text-color: var(--ig-secondary-100-contrast); + --ig-chip-border-color: var(--ig-secondary-500); + --ig-chip-hover-outlined-background: var(--ig-secondary-200); + --ig-chip-hover-outlined-text-color: var(--ig-secondary-200-contrast); + --ig-chip-hover-border-color: var(--ig-secondary-500); + --ig-chip-focus-outlined-background: var(--ig-secondary-300); + --ig-chip-focus-outlined-text-color: var(--ig-secondary-300-contrast); + --ig-chip-focus-border-color: var(--ig-secondary-500); } -//Sass theme approach -// $custom-chip-theme: chip-theme( -// $text-color: #fff, -// $hover-background: #fff, -// $focus-background: #fff, -// $border-radius: rem(5px) -// ); -// -// :host { -// @include tokens($custom-chip-theme); -// } +:host ::ng-deep .contact-chip .igx-chip__start { + color: var(--ig-secondary-800); +} diff --git a/src/app/data-display/chip/chip-styling/chip-styling.component.ts b/src/app/data-display/chip/chip-styling/chip-styling.component.ts index f3ac4516d0..85d700924d 100644 --- a/src/app/data-display/chip/chip-styling/chip-styling.component.ts +++ b/src/app/data-display/chip/chip-styling/chip-styling.component.ts @@ -1,47 +1,22 @@ -import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; -import { facebook, linkedin } from '@igniteui/material-icons-extended'; -import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { Component, inject } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; -import { NgClass } from '@angular/common'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +// The outline takes the chip text color, and the filled half keeps the warning color. +const halfStarIcon = ''; +const peopleIcon = ''; @Component({ - selector: 'app-chip', - styleUrls: ['./chip-styling.component.scss'], - templateUrl: './chip-styling.component.html', - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] + selector: 'app-chip-styling', + styleUrls: ['./chip-styling.component.scss'], + templateUrl: './chip-styling.component.html', + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective] }) - -export class ChipStylingSampleComponent implements OnInit { - changeDetectionRef = inject(ChangeDetectorRef); - private iconService = inject(IgxIconService) - public ngOnInit() { - this.iconService.addSvgIconFromText('x', ''); - this.iconService.addSvgIconFromText('youtube', ' '); - this.iconService.addSvgIconFromText(facebook.name, facebook.value); - this.iconService.addSvgIconFromText(linkedin.name, linkedin.value); - } - - public chipList = [ - { - text: 'X.com', - class: 'xcom', - icon: 'x' - }, - { - text: 'Youtube', - class: 'youtube', - icon: 'youtube' - }, - { - text: 'Facebook', - class: 'facebook', - icon: 'facebook' - }, - { - text: 'LinkedIn', - class: 'linkedin', - icon: 'linkedin' +export class ChipStylingSampleComponent { + constructor() { + const iconService = inject(IgxIconService); + iconService.addSvgIconFromText('star_half', halfStarIcon, 'styling'); + iconService.addSvgIconFromText('people', peopleIcon, 'styling'); } - ]; } diff --git a/src/app/data-display/chip/chip-styling/layout.scss b/src/app/data-display/chip/chip-styling/layout.scss deleted file mode 100644 index f5afb9a678..0000000000 --- a/src/app/data-display/chip/chip-styling/layout.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "igniteui-angular/theming" as *; - -:host { - display: grid; - place-content: center; - height: 100%; -} diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html index 9e7d4e2a79..7330dff6da 100644 --- a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html +++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html @@ -1,25 +1,38 @@ - - @for (chip of chipList; track chip) { - - {{chip.icon}} - {{chip.text}} - - } - - - - check_circle - - - - delete - +
+ + Preferred Activity +
+ @for (activity of selected; track activity.label) { + + + {{ activity.label }} + + + + + } + + +
+
+ @for (activity of available; track activity.label) { + + + {{ activity.label }} + + } +
+
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss index a60d456faa..ea00a0cfae 100644 --- a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss +++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.scss @@ -1 +1,20 @@ -@use "layout.scss"; +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + /* The design's own palette. It lives here instead of coming from the theme + palette, so the sample keeps its colors in every theme. */ + --color-activity-primary: #006ae6; + --color-activity-primary-strong: #0055b8; + --color-activity-tint: #e6f2ff; + --color-activity-tint-strong: #cce4ff; + --color-activity-surface: #e5ebf3; + --color-activity-ink: #00142b; + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; + box-sizing: border-box; +} diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts index 7a5fc1a135..9e323ec85e 100644 --- a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts +++ b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.ts @@ -1,54 +1,74 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; -import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Component, ElementRef, Injector, afterNextRender, inject } from '@angular/core'; +import { IChipKeyDownEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { icons } from './icons'; +interface Activity { + label: string; + icon: string; +} + +const activities: Activity[] = [ + { label: 'Yoga', icon: 'self_improvement' }, + { label: 'Swimming', icon: 'pool' }, + { label: 'Hiking', icon: 'hiking' }, + { label: 'Lifting', icon: 'fitness_center' }, + { label: 'Cycling', icon: 'directions_bike' }, + { label: 'Tennis', icon: 'sports_tennis' }, + { label: 'Soccer', icon: 'sports_soccer' }, + { label: 'Baseball', icon: 'sports_baseball' } +]; @Component({ selector: 'app-chip-tailwind-styling', styleUrls: ['./chip-tailwind-styling.component.scss'], templateUrl: './chip-tailwind-styling.component.html', - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + imports: [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 selected: Activity[] = activities.slice(0, 2); + + private element: HTMLElement = inject(ElementRef).nativeElement; + private injector = inject(Injector); + constructor() { + const iconService = inject(IgxIconService); + Object.entries(icons).forEach(([name, svg]) => iconService.addSvgIconFromText(name, svg, 'activity')); + } - public chipRemoved(event: IBaseChipEventArgs) { - this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); - this.changeDetectionRef.detectChanges(); + public get available(): Activity[] { + return activities.filter((activity) => !this.selected.includes(activity)); } - 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); + // The chip only handles Space when it is selectable, so Enter and Space add the activity here. + public onAvailableKeyDown(event: IChipKeyDownEventArgs, activity: Activity) { + if (event.originalEvent.key === 'Enter' || event.originalEvent.key === ' ') { + this.addActivity(activity); } - this.chipList = newChipList; + } + + public addActivity(activity: Activity) { + const available = this.available; + const rest = available.filter((item) => item !== activity); + const next = rest[Math.min(available.indexOf(activity), rest.length - 1)]; + this.selected = [...this.selected, activity]; + this.focusChip(next ? 'available' : 'selected', next ? next.label : activity.label); + } + + public removeActivity(activity: Activity) { + const rest = this.selected.filter((item) => item !== activity); + const next = rest[Math.min(this.selected.indexOf(activity), rest.length - 1)]; + this.selected = rest; + this.focusChip(next ? 'selected' : 'available', next ? next.label : activity.label); + } + + // The chip that had focus is gone, so focus a chip in the same list, or the moved chip when that list is empty. + private focusChip(list: 'selected' | 'available', label: string) { + afterNextRender(() => { + const chip = this.element.querySelector(`[data-activity="${label}"]`); + const control = list === 'selected' ? chip?.querySelector('.igx-chip__remove') : chip; + control?.focus(); + }, { injector: this.injector }); } } diff --git a/src/app/data-display/chip/chip-tailwind-styling/icons.ts b/src/app/data-display/chip/chip-tailwind-styling/icons.ts new file mode 100644 index 0000000000..7e7f544644 --- /dev/null +++ b/src/app/data-display/chip/chip-tailwind-styling/icons.ts @@ -0,0 +1,13 @@ +// Material icons used by the sample, registered in the "activity" icon family. +export const icons: Record = { + self_improvement: '', + pool: '', + hiking: '', + fitness_center: '', + directions_bike: '', + sports_tennis: '', + sports_soccer: '', + sports_baseball: '', + close: '', + add: '' +}; diff --git a/src/app/data-display/chip/chip-tailwind-styling/layout.scss b/src/app/data-display/chip/chip-tailwind-styling/layout.scss deleted file mode 100644 index a201d613a7..0000000000 --- a/src/app/data-display/chip/chip-tailwind-styling/layout.scss +++ /dev/null @@ -1,4 +0,0 @@ -igx-chips-area { - gap: 0.5rem; - padding: 1rem 0 0 1rem; -} \ No newline at end of file diff --git a/src/app/data-display/chip/chip-types/chip-types.component.html b/src/app/data-display/chip/chip-types/chip-types.component.html new file mode 100644 index 0000000000..986c94459d --- /dev/null +++ b/src/app/data-display/chip/chip-types/chip-types.component.html @@ -0,0 +1,8 @@ +
+ Default + Chip +
+
+ Primary + Chip +
diff --git a/src/app/data-display/chip/chip-types/chip-types.component.scss b/src/app/data-display/chip/chip-types/chip-types.component.scss new file mode 100644 index 0000000000..3696a98b45 --- /dev/null +++ b/src/app/data-display/chip/chip-types/chip-types.component.scss @@ -0,0 +1,28 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.chip-types-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.chip-types-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/src/app/data-display/chip/chip-types/chip-types.component.ts b/src/app/data-display/chip/chip-types/chip-types.component.ts new file mode 100644 index 0000000000..1a48548272 --- /dev/null +++ b/src/app/data-display/chip/chip-types/chip-types.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxChipComponent } from 'igniteui-angular/chips'; + +@Component({ + selector: 'app-chip-types', + templateUrl: './chip-types.component.html', + styleUrls: ['./chip-types.component.scss'], + imports: [IgxChipComponent] +}) +export class ChipTypesComponent { } diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 9d197973fd..515f44a66b 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -11,10 +11,16 @@ export const dataDisplayRoutesData = { "badge-dot": { displayName: "Badge Dot", parentName: "Badge" }, "badge-styling": { displayName: "Badge Styling", parentName: "Badge" }, "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" }, - "chip-simple": { displayName: "Chip Simple", parentName: "Chip" }, + "chip-overview": { displayName: "Overview", parentName: "Chip" }, + "chip-layout": { displayName: "Chip Layout", parentName: "Chip" }, + "chip-types": { displayName: "Chip Types", parentName: "Chip" }, + "chip-size": { displayName: "Chip Size", parentName: "Chip" }, + "chip-interaction-state": { displayName: "Chip Interaction State", parentName: "Chip" }, + "chip-state": { displayName: "Chip State", parentName: "Chip" }, + "chip-remove": { displayName: "Chip Remove", parentName: "Chip" }, "chip-outlined": { displayName: "Chip Outlined", parentName: "Chip" }, "chip-variants": { displayName: "Chip Variants", parentName: "Chip" }, - "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" }, + "chip-area": { displayName: "Chip Area", 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" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 0c0584b651..41d01b7717 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -8,8 +8,14 @@ import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.co import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component'; import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component'; import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component'; -import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component'; -import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component'; +import { ChipOverviewComponent } from './chip/chip-overview/chip-overview.component'; +import { ChipLayoutComponent } from './chip/chip-layout/chip-layout.component'; +import { ChipTypesComponent } from './chip/chip-types/chip-types.component'; +import { ChipSizeComponent } from './chip/chip-size/chip-size.component'; +import { ChipInteractionStateComponent } from './chip/chip-interaction-state/chip-interaction-state.component'; +import { ChipStateComponent } from './chip/chip-state/chip-state.component'; +import { ChipRemoveComponent } from './chip/chip-remove/chip-remove.component'; +import { ChipAreaComponent } from './chip/chip-area/chip-area.component'; import { ChipOutlinedComponent } from './chip/chip-outlined/chip-outlined.component'; import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component'; import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component'; @@ -118,14 +124,44 @@ export const DataDisplayRoutes: Routes = [ path: 'badge-tailwind-styling' }, { - component: ChipAreaSampleComponent, - data: dataDisplayRoutesData['chip-area-sample'], - path: 'chip-area-sample' + component: ChipOverviewComponent, + data: dataDisplayRoutesData['chip-overview'], + path: 'chip-overview' }, { - component: ChipSimpleComponent, - data: dataDisplayRoutesData['chip-simple'], - path: 'chip-simple' + component: ChipLayoutComponent, + data: dataDisplayRoutesData['chip-layout'], + path: 'chip-layout' + }, + { + component: ChipTypesComponent, + data: dataDisplayRoutesData['chip-types'], + path: 'chip-types' + }, + { + component: ChipSizeComponent, + data: dataDisplayRoutesData['chip-size'], + path: 'chip-size' + }, + { + component: ChipInteractionStateComponent, + data: dataDisplayRoutesData['chip-interaction-state'], + path: 'chip-interaction-state' + }, + { + component: ChipStateComponent, + data: dataDisplayRoutesData['chip-state'], + path: 'chip-state' + }, + { + component: ChipRemoveComponent, + data: dataDisplayRoutesData['chip-remove'], + path: 'chip-remove' + }, + { + component: ChipAreaComponent, + data: dataDisplayRoutesData['chip-area'], + path: 'chip-area' }, { component: ChipOutlinedComponent, From 005fce78f63f65459cddcefd12fdcb6851ef3cb0 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 7 Oct 2026 17:24:14 +0300 Subject: [PATCH 2/5] feat(chip): add captions to the outlined sample Co-Authored-By: Claude Opus 5.5 --- .../chip-outlined.component.html | 19 ++++--------- .../chip-outlined.component.scss | 28 +++++++++++++++++-- .../chip-outlined/chip-outlined.component.ts | 17 ++--------- 3 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.html b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html index c9d6b7529c..3ea695e1b4 100644 --- a/src/app/data-display/chip/chip-outlined/chip-outlined.component.html +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html @@ -1,13 +1,6 @@ -
- @for (item of variants; track item.label) { - - {{ item.label }} - - } -
+@for (item of variants; track item.label) { +
+ {{ item.label }} + Chip +
+} diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss index a17f5cbe51..ac4f563adf 100644 --- a/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.scss @@ -1,7 +1,29 @@ -.sample-container { +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + --ig-size: var(--ig-size-medium); + display: flex; flex-wrap: wrap; align-items: center; - gap: 5px; - padding: 1rem 0 0 1rem; + justify-content: center; + gap: 1.5rem 2.5rem; + height: 100%; +} + +.chip-outlined-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.chip-outlined-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; } diff --git a/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts index 3cbf555bd6..ae4d440244 100644 --- a/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts +++ b/src/app/data-display/chip/chip-outlined/chip-outlined.component.ts @@ -1,19 +1,13 @@ -import { ChangeDetectorRef, Component, inject } from '@angular/core'; -import { IBaseChipEventArgs, IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips'; -import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; - +import { Component } from '@angular/core'; +import { IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips'; @Component({ selector: 'app-chip-outlined', styleUrls: ['./chip-outlined.component.scss'], templateUrl: './chip-outlined.component.html', - imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] + imports: [IgxChipComponent] }) - export class ChipOutlinedComponent { - private cdr = inject(ChangeDetectorRef); - public variants: { variant: IgxChipTypeVariant | undefined; label: string }[] = [ { variant: undefined, label: 'Default' }, { variant: IgxChipTypeVariant.PRIMARY, label: 'Primary' }, @@ -22,9 +16,4 @@ export class ChipOutlinedComponent { { variant: IgxChipTypeVariant.WARNING, label: 'Warning' }, { variant: IgxChipTypeVariant.DANGER, label: 'Danger' } ]; - - public chipRemoved(event: IBaseChipEventArgs) { - this.variants = this.variants.filter(v => v.label !== event.owner.id); - this.cdr.detectChanges(); - } } From b58c1f4860eff968485d5c6dc1d39a644022d6ec Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 12 Oct 2026 17:39:43 +0300 Subject: [PATCH 3/5] feat(chip): match the overview sample to the live demo design Co-Authored-By: Claude Opus 5.5 --- .../chip-overview.component.html | 12 +++++-- .../chip-overview.component.scss | 5 ++- .../chip-overview/chip-overview.component.ts | 32 +++++++++++++++++-- 3 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.html b/src/app/data-display/chip/chip-overview/chip-overview.component.html index 1f87fcdfb5..ad5dfe386b 100644 --- a/src/app/data-display/chip/chip-overview/chip-overview.component.html +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.html @@ -6,8 +6,8 @@
- Skills · {{ selectedSkills.length }} selected -
+ Skills · {{ selected.length }} selected +
@for (skill of skills; track skill) {
+
+ Selected +
+ @for (skill of selected; track skill) { + {{ skill }} + } +
+
diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.scss b/src/app/data-display/chip/chip-overview/chip-overview.component.scss index abb4c518c6..c79850ce95 100644 --- a/src/app/data-display/chip/chip-overview/chip-overview.component.scss +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.scss @@ -39,10 +39,13 @@ --ig-size: var(--ig-size-small); } -.skills { +/* The minimum height keeps the card from shrinking when no skill is selected. */ +.chip-group { + box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 0.5rem; + min-height: 2rem; padding: 0.25rem; } diff --git a/src/app/data-display/chip/chip-overview/chip-overview.component.ts b/src/app/data-display/chip/chip-overview/chip-overview.component.ts index d68e0f7122..85a21e61a6 100644 --- a/src/app/data-display/chip/chip-overview/chip-overview.component.ts +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, Injector, ViewChild, afterNextRender, inject } from '@angular/core'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; @@ -10,12 +10,40 @@ import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/inpu imports: [IgxButtonDirective, IgxChipComponent, IgxInputDirective, IgxInputGroupComponent] }) export class ChipOverviewComponent { + @ViewChild('skillsGroup') private skillsGroup?: ElementRef; + @ViewChild('selectedGroup') private selectedGroup?: ElementRef; + public skills = ['Figma', 'React', 'CSS', 'Prototyping', 'Motion Design']; - public selectedSkills: string[] = []; + public selectedSkills = ['Prototyping', 'Motion Design']; + private injector = inject(Injector); + + /** Both groups list the selected skills in the order of the skills list. */ + public get selected() { + return this.skills.filter((skill) => this.selectedSkills.includes(skill)); + } public toggleSkill(skill: string, selected: boolean) { + // The chip also reports the selection it receives through the binding, so skip what is already in place. + if (selected === this.selectedSkills.includes(skill)) { + return; + } this.selectedSkills = selected ? [...this.selectedSkills, skill] : this.selectedSkills.filter((item) => item !== skill); } + + public removeSkill(skill: string) { + const index = this.selected.indexOf(skill); + this.toggleSkill(skill, false); + + // The removed chip is gone, so move focus to the next selected skill, or back to the skill itself when none is left. + afterNextRender(() => { + const remaining = this.selectedGroup?.nativeElement.querySelectorAll('igx-chip'); + const next = remaining?.[index] ?? remaining?.[index - 1]; + const target = next + ? next.querySelector('.igx-chip__remove') + : this.skillsGroup?.nativeElement.querySelectorAll('igx-chip')[this.skills.indexOf(skill)]; + target?.focus(); + }, { injector: this.injector }); + } } From 99a8011e496e969264f9fb45f79f531c885bdbb2 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 13 Oct 2026 17:57:55 +0300 Subject: [PATCH 4/5] fix(chip): apply design adjustments --- .../chip-interaction-state.component.ts | 2 ++ .../chip/chip-layout/chip-layout.component.ts | 2 ++ .../chip-remove/chip-remove.component.html | 11 +------ .../chip-remove/chip-remove.component.scss | 32 ------------------- .../chip/chip-remove/chip-remove.component.ts | 27 +++------------- .../chip/chip-state/chip-state.component.ts | 2 ++ .../chip/chip-types/chip-types.component.ts | 2 ++ 7 files changed, 14 insertions(+), 64 deletions(-) diff --git a/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts index c84d2ea89d..de7f2fe678 100644 --- a/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts +++ b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts @@ -5,6 +5,8 @@ import { IgxChipComponent } from 'igniteui-angular/chips'; selector: 'app-chip-interaction-state', templateUrl: './chip-interaction-state.component.html', styleUrls: ['./chip-interaction-state.component.scss'], + // The chips only show their look, so inert keeps them out of the tab order and ignores pointer input. + host: { inert: '' }, imports: [IgxChipComponent] }) export class ChipInteractionStateComponent { } diff --git a/src/app/data-display/chip/chip-layout/chip-layout.component.ts b/src/app/data-display/chip/chip-layout/chip-layout.component.ts index 8d7e6b68fc..3c7db61289 100644 --- a/src/app/data-display/chip/chip-layout/chip-layout.component.ts +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.ts @@ -7,6 +7,8 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g selector: 'app-chip-layout', templateUrl: './chip-layout.component.html', styleUrls: ['./chip-layout.component.scss'], + // The chips only show their look, so inert keeps them out of the tab order and ignores pointer input. + host: { inert: '' }, imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective] }) export class ChipLayoutComponent { } diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.html b/src/app/data-display/chip/chip-remove/chip-remove.component.html index 958441e8b5..a6c6fcee8b 100644 --- a/src/app/data-display/chip/chip-remove/chip-remove.component.html +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.html @@ -1,10 +1 @@ -
- Remove Chip -
- @if (isVisible) { - Chip - } @else { - - } -
-
+Chip diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.scss b/src/app/data-display/chip/chip-remove/chip-remove.component.scss index 50ee079bb7..806ea231ed 100644 --- a/src/app/data-display/chip/chip-remove/chip-remove.component.scss +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.scss @@ -1,6 +1,3 @@ -/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ -@import url("https://use.typekit.net/bng2zgw.css"); - :host { --ig-size: var(--ig-size-medium); @@ -9,32 +6,3 @@ justify-content: center; height: 100%; } - -.chip-remove-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -/* A row as tall as the chip. The restore button can be taller in some themes, so it - overflows the row evenly instead of resizing the sample when it replaces the chip. */ -.chip-remove-slot { - display: flex; - align-items: center; - justify-content: center; - height: 1.5rem; -} - -.restore-button { - --ig-size: var(--ig-size-small); -} - -.chip-remove-item span { - color: var(--ig-gray-600); - font-family: aktiv-grotesk, sans-serif; - font-size: 0.8125rem; - font-weight: 400; - line-height: 1.25rem; - letter-spacing: 0.3px; -} diff --git a/src/app/data-display/chip/chip-remove/chip-remove.component.ts b/src/app/data-display/chip/chip-remove/chip-remove.component.ts index a47f988db4..ec4694b410 100644 --- a/src/app/data-display/chip/chip-remove/chip-remove.component.ts +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.ts @@ -1,29 +1,12 @@ -import { Component, ElementRef, Injector, ViewChild, afterNextRender, inject } from '@angular/core'; +import { Component } from '@angular/core'; import { IgxChipComponent } from 'igniteui-angular/chips'; -import { IgxButtonDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-chip-remove', templateUrl: './chip-remove.component.html', styleUrls: ['./chip-remove.component.scss'], - imports: [IgxButtonDirective, IgxChipComponent] + // The chip only shows the removable look, so inert keeps it out of the tab order and ignores pointer input. + host: { inert: '' }, + imports: [IgxChipComponent] }) -export class ChipRemoveComponent { - @ViewChild('chip', { read: ElementRef }) private chip?: ElementRef; - @ViewChild('restore') private restore?: ElementRef; - - public isVisible = true; - private injector = inject(Injector); - - public toggleChip(visible: boolean) { - this.isVisible = visible; - - // The control the user activated is gone, so move focus to the one that replaced it. - afterNextRender(() => { - const target = visible - ? this.chip?.nativeElement.querySelector('.igx-chip__remove') - : this.restore?.nativeElement; - target?.focus(); - }, { injector: this.injector }); - } -} +export class ChipRemoveComponent { } diff --git a/src/app/data-display/chip/chip-state/chip-state.component.ts b/src/app/data-display/chip/chip-state/chip-state.component.ts index 44be141abf..a4153b8f16 100644 --- a/src/app/data-display/chip/chip-state/chip-state.component.ts +++ b/src/app/data-display/chip/chip-state/chip-state.component.ts @@ -7,6 +7,8 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-chip-state', templateUrl: './chip-state.component.html', styleUrls: ['./chip-state.component.scss'], + // The chips only show their look, so inert keeps them out of the tab order and ignores pointer input. + host: { inert: '' }, imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) export class ChipStateComponent { } diff --git a/src/app/data-display/chip/chip-types/chip-types.component.ts b/src/app/data-display/chip/chip-types/chip-types.component.ts index 1a48548272..725b3df507 100644 --- a/src/app/data-display/chip/chip-types/chip-types.component.ts +++ b/src/app/data-display/chip/chip-types/chip-types.component.ts @@ -5,6 +5,8 @@ import { IgxChipComponent } from 'igniteui-angular/chips'; selector: 'app-chip-types', templateUrl: './chip-types.component.html', styleUrls: ['./chip-types.component.scss'], + // The chips only show their look, so inert keeps them out of the tab order and ignores pointer input. + host: { inert: '' }, imports: [IgxChipComponent] }) export class ChipTypesComponent { } From 542eb1b08b3bf602b02ebd43181c5614aba5a10f Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 14 Oct 2026 15:38:42 +0300 Subject: [PATCH 5/5] refactor(chip): reference icons by name instead of ligature text --- .../chip/chip-layout/chip-layout.component.html | 8 ++++---- .../chip/chip-size/chip-size.component.html | 12 ++++++------ .../chip/chip-state/chip-state.component.html | 8 ++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/data-display/chip/chip-layout/chip-layout.component.html b/src/app/data-display/chip/chip-layout/chip-layout.component.html index 25dbc4fe86..79899b3cdd 100644 --- a/src/app/data-display/chip/chip-layout/chip-layout.component.html +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.html @@ -5,22 +5,22 @@
Prefix - arrow_upward + Chip
Prefix+Suffix - arrow_upward + Chip - account_circle +
Suffix Chip - account_circle +
diff --git a/src/app/data-display/chip/chip-size/chip-size.component.html b/src/app/data-display/chip/chip-size/chip-size.component.html index 2e06232cea..8c7ca51dda 100644 --- a/src/app/data-display/chip/chip-size/chip-size.component.html +++ b/src/app/data-display/chip/chip-size/chip-size.component.html @@ -1,24 +1,24 @@
Small - arrow_upward + Chip - account_circle +
Medium - arrow_upward + Chip - account_circle +
Large - arrow_upward + Chip - account_circle +
diff --git a/src/app/data-display/chip/chip-state/chip-state.component.html b/src/app/data-display/chip/chip-state/chip-state.component.html index f773ff6250..1fadcd384d 100644 --- a/src/app/data-display/chip/chip-state/chip-state.component.html +++ b/src/app/data-display/chip/chip-state/chip-state.component.html @@ -1,28 +1,28 @@
Idle - arrow_upward + Chip
Hover - arrow_upward + Chip
Focused - arrow_upward + Chip
Selected - arrow_upward + Chip