From 7158ddff7df126d1f98c0862b7f612266961a3e9 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Wed, 7 Oct 2026 12:01:49 +0300 Subject: [PATCH 1/6] feat(breadcrumbs): add dropdown sample + add theme-picker to 'state' and 'size' samples (#4049) --- .../configs/BreadcrumbsConfigGenerator.ts | 6 ++ .../breadcrumbs-dropdown.component.html | 24 ++++++++ .../breadcrumbs-dropdown.component.scss | 57 +++++++++++++++++++ .../breadcrumbs-dropdown.component.ts | 24 ++++++++ .../breadcrumbs-sizes.component.scss | 1 + .../breadcrumbs-states.component.scss | 48 +++++++++++++++- src/app/layouts/layouts-routes-data.ts | 1 + src/app/layouts/layouts.routes.ts | 6 ++ 8 files changed, 164 insertions(+), 3 deletions(-) create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts diff --git a/live-editing/configs/BreadcrumbsConfigGenerator.ts b/live-editing/configs/BreadcrumbsConfigGenerator.ts index 4b4214078..b12db721e 100644 --- a/live-editing/configs/BreadcrumbsConfigGenerator.ts +++ b/live-editing/configs/BreadcrumbsConfigGenerator.ts @@ -29,6 +29,12 @@ export class BreadcrumbsConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/layouts/breadcrumbs/" })); + configs.push(new Config({ + component: 'BreadcrumbsDropdownComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/layouts/breadcrumbs/" + })); + configs.push(new Config({ component: 'BreadcrumbsCustomSeparatorComponent', appConfig: BaseAppConfig, diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html new file mode 100644 index 000000000..e3eee9043 --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html @@ -0,0 +1,24 @@ + diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss new file mode 100644 index 000000000..124713d5c --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss @@ -0,0 +1,57 @@ +:host { + display: flex; + justify-content: center; + height: 100%; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +[slot="target"] { + color: var(--text-color); + + &:hover { + color: var(--hover-text-color); + cursor: pointer; + } + + &:focus { + color: var(--focus-text-color); + } +} + +igc-dropdown-item[selected] { + background: var(--background-color); + outline: none; + color: var(--item-text-color); + + igc-icon { + color: var(--item-icon-color); + } + + &:hover { + background: var(--hover-item-background); + color: var(--hover-item-text-color); + + igc-icon { + color: var(--hover-item-icon-color); + } + } +} + +igc-icon { + --ig-size: 2; +} + +@layer base { + a { + color: revert-layer; + } + + * { + padding: revert-layer; + margin: revert-layer; + } +} diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts new file mode 100644 index 000000000..82aa65b62 --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts @@ -0,0 +1,24 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent); + +const threeDotsIcon = + ''; + +const folderIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('three-dots', threeDotsIcon); + registerIconFromText('folder', folderIcon); +} + +@Component({ + selector: 'app-breadcrumbs-dropdown', + styleUrls: ['./breadcrumbs-dropdown.component.scss'], + templateUrl: './breadcrumbs-dropdown.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsDropdownComponent { } diff --git a/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss b/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss index a3d90d08d..1a78dec48 100644 --- a/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss +++ b/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss @@ -4,6 +4,7 @@ height: 100%; align-items: center; overflow: auto; + font-family: var(--ig-font-family); } .small { diff --git a/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss b/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss index ad8b1b3ed..c7ae3e26a 100644 --- a/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss +++ b/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss @@ -5,6 +5,7 @@ max-height: 15rem; padding-block-start: 1rem; overflow: auto; + font-family: var(--ig-font-family); } igc-breadcrumbs { @@ -28,7 +29,6 @@ igc-breadcrumbs { a { color: var(--focus-text-color); - text-decoration: underline var(--focus-underline-color); } } @@ -49,7 +49,6 @@ igc-breadcrumbs { a { color: var(--focus-hover-text-color); - text-decoration: underline var(--focus-hover-underline-color); } } @@ -60,7 +59,6 @@ igc-breadcrumbs { a { color: var(--focus-pressed-text-color); - text-decoration: underline var(--focus-pressed-underline-color); } } @@ -74,6 +72,44 @@ igc-breadcrumbs { } } +[data-igd-theme="material"] { + .state-focused-pressed a, + .state-focused-hover a, + .state-focused a { + text-decoration: underline var(--focus-pressed-underline-color); + } +} + +[data-igd-theme="fluent"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .0625rem solid var(--focus-border-color); + } +} + +[data-igd-theme="bootstrap"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .25rem solid var(--focus-border-color); + border-radius: 0.25rem; + } +} + +[data-igd-theme="indigo"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .1875rem solid var(--focus-border-color); + border-radius: 2rem; + } + + .state-disabled igc-icon { + opacity: 0.2; + } +} + span { color: #7d8a96; font-size: 0.875rem; @@ -100,6 +136,12 @@ igc-breadcrumbs:nth-of-type(n+4) { grid-row: 2; } +@layer base { + a { + color: revert-layer; + } +} + @media (width < 510px) { :host { max-height: unset; diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index cb49866c6..1b3a1d86d 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -20,6 +20,7 @@ export const layoutsRoutesData = { 'breadcrumbs-overview': { displayName: 'Breadcrumbs Overview', parentName: 'Breadcrumbs' }, 'breadcrumbs-custom-separator': { displayName: 'Breadcrumbs Custom Separator', parentName: 'Breadcrumbs' }, 'breadcrumbs-prefix-suffix': { displayName: 'Breadcrumbs Prefix and Suffix', parentName: 'Breadcrumbs' }, + 'breadcrumbs-dropdown': { displayName: 'Breadcrumbs Dropdown', parentName: 'Breadcrumbs' }, 'breadcrumbs-styling': { displayName: 'Breadcrumbs Styling', parentName: 'Breadcrumbs' }, 'breadcrumbs-tailwind-styling': { displayName: 'Breadcrumbs Tailwind Styling', parentName: 'Breadcrumbs' }, 'breadcrumbs-wrapping': { displayName: 'Breadcrumbs Wrapping', parentName: 'Breadcrumbs' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index ff1087244..576d5a7c9 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -9,6 +9,7 @@ import { AvatarTailwindStylingSampleComponent } from './avatar/avatar-tailwind-s import { BreadcrumbsOverviewComponent } from './breadcrumbs/breadcrumbs-overview/breadcrumbs-overview.component'; import { BreadcrumbsCustomSeparatorComponent } from './breadcrumbs/breadcrumbs-custom-separator/breadcrumbs-custom-separator.component'; import { BreadcrumbsPrefixSuffixComponent } from './breadcrumbs/breadcrumbs-prefix-suffix/breadcrumbs-prefix-suffix.component'; +import { BreadcrumbsDropdownComponent } from './breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component'; import { BreadcrumbsStylingComponent } from './breadcrumbs/breadcrumbs-styling/breadcrumbs-styling.component'; import { BreadcrumbsTailwindStylingComponent } from './breadcrumbs/breadcrumbs-tailwind-styling/breadcrumbs-tailwind-styling.component'; import { BreadcrumbsWrappingComponent } from './breadcrumbs/breadcrumbs-wrapping/breadcrumbs-wrapping.component'; @@ -221,6 +222,11 @@ export const LayoutsRoutes: Routes = [ data: layoutsRoutesData['breadcrumbs-prefix-suffix'], path: 'breadcrumbs-prefix-suffix' }, + { + component: BreadcrumbsDropdownComponent, + data: layoutsRoutesData['breadcrumbs-dropdown'], + path: 'breadcrumbs-dropdown' + }, { component: BreadcrumbsStylingComponent, data: layoutsRoutesData['breadcrumbs-styling'], From cd834880bb627c4fc4001c6466d9162017726f1d Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Fri, 9 Oct 2026 18:31:01 +0300 Subject: [PATCH 2/6] fix(samples): update samples styling (#4035) * fix(samples): update styling problems * fix(badge): remove unneeded code * fix(badge): update badge samples styling * fix(badge): update overview styling * fix(badge): samples styling * fix(samples): update styling problems --------- Co-authored-by: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> --- live-editing/configs/ButtonConfigGenerator.ts | 2 - .../badge/badge-dot/badge-dot.component.scss | 4 +- .../badge-outlined.component.html | 4 +- .../badge-outlined.component.scss | 17 +++- .../badge-outlined.component.ts | 3 +- .../badge-overview.component.scss | 18 ++++ .../badge-shape/badge-shape.component.scss | 10 +-- .../badge-size/badge-size.component.scss | 8 +- .../badge-type/badge-type.component.scss | 10 +-- .../badge-variants.component.scss | 8 +- .../button-contained.component.scss | 6 +- .../button-download.component.scss | 6 +- .../button-fab/button-fab.component.scss | 6 +- .../button-flat/button-flat.component.scss | 6 +- .../button-interaction-states.component.scss | 25 +++--- .../button-layout.component.scss | 16 ++-- .../button-outlined.component.scss | 6 +- .../button-overview.component.scss | 17 ++-- .../button-size/button-size.component.scss | 47 ++++++---- .../button-states.component.scss | 8 +- .../button-styling.component.scss | 55 ++++++++++-- .../button/button-styling/layout.scss | 41 --------- .../button-tailwind-styling.component.html | 20 +++-- .../button-tailwind-styling.component.scss | 7 +- .../button-tailwind-styling/layout.scss | 56 ------------ .../button-group-overview.component.scss | 11 ++- .../switch-disabled.component.scss | 19 ++-- .../switch-enabled.component.scss | 17 +++- .../switch-layout.component.scss | 19 ++-- .../switch-overview.component.scss | 54 +++++++---- .../switch-selected.component.scss | 21 +++-- .../switch-styling.component.scss | 90 +++++++++++++------ .../switch-tailwind-styling.component.scss | 14 +-- .../avatar-shape/avatar-shape.component.scss | 8 +- .../avatar-size/avatar-size.component.scss | 8 +- .../avatar-variants.component.scss | 8 +- src/styles.scss | 22 ----- 37 files changed, 395 insertions(+), 302 deletions(-) delete mode 100644 src/app/data-entries/button/button-styling/layout.scss delete mode 100644 src/app/data-entries/button/button-tailwind-styling/layout.scss diff --git a/live-editing/configs/ButtonConfigGenerator.ts b/live-editing/configs/ButtonConfigGenerator.ts index fbdecc802..3ae3e22d3 100644 --- a/live-editing/configs/ButtonConfigGenerator.ts +++ b/live-editing/configs/ButtonConfigGenerator.ts @@ -79,7 +79,6 @@ export class ButtonConfigGenerator implements IConfigGenerator { // button styling configs.push(new Config({ component: 'ButtonStylingComponent', - additionalFiles: ["/src/app/data-entries/button/button-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/button/" })); @@ -87,7 +86,6 @@ export class ButtonConfigGenerator implements IConfigGenerator { // button tailwind styling configs.push(new Config({ component: 'ButtonTailwindStylingComponent', - additionalFiles: ["/src/app/data-entries/button/button-tailwind-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/button/" })); diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss index ffb028247..6c4f7b9e4 100644 --- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss @@ -2,8 +2,6 @@ @use "igniteui-theming/sass/typography" as *; :host { - --sample-accent: var(--ig-primary-800); - display: grid; grid-auto-flow: column; place-content: center; @@ -103,7 +101,7 @@ $anchors: icon, avatar; color: var(--ig-gray-700); &.active { - color: var(--sample-accent); + color: var(--ig-primary-500); } } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html index 58333b1d6..36b762ca3 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html @@ -1,4 +1,6 @@ - +
+ favorite_border +
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss index 4dd987fdd..aff8f663f 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss @@ -21,7 +21,17 @@ } .icon-anchor { - --ig-avatar-background: #{color($color: gray, $variant: 900, $opacity: 0.08)}; + display: grid; + place-items: center; + inline-size: rem(36px); + block-size: rem(36px); + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); + + igx-icon { + font-size: rem(18px); + } } igx-badge { @@ -32,6 +42,11 @@ igx-badge { inset-inline-start: anchor(85.5%); translate: -50% -50%; + &:nth-of-type(1) { + inset-block-start: anchor(10%); + inset-inline-start: anchor(100%); + } + &:nth-of-type(2) { inset-block-start: anchor(85.5%); } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts index 226ce9c10..8dc6d59a4 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts @@ -1,13 +1,14 @@ import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent } from 'igniteui-angular/icon'; import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; @Component({ selector: 'app-badge-outlined', styleUrls: ['./badge-outlined.component.scss'], templateUrl: './badge-outlined.component.html', - imports: [IgxAvatarComponent, IgxBadgeComponent, IGX_STEPPER_DIRECTIVES] + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent, IGX_STEPPER_DIRECTIVES] }) export class BadgeOutlinedComponent { diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss index 51d1079d5..ae4d98831 100644 --- a/src/app/data-display/badge/badge-overview/badge-overview.component.scss +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss @@ -17,6 +17,20 @@ igx-icon { igx-chip { --ig-size: var(--ig-size-large); + --ig-chip-background: var(--ig-gray-300); + --ig-chip-border-radius: #{rem(16px)}; + + ::ng-deep .igx-chip__item { + @include type-style("body-2") { + margin: 0; + } + + font-family: "Titillium Web", sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); + } } igx-badge { @@ -32,6 +46,10 @@ igx-badge:nth-of-type(1) { inset-block-start: anchor(85.5%); } +igx-badge:nth-of-type(3) { + inset-inline-start: anchor(93%); +} + $anchors: avatar, mail, events, notifications; @each $anchor in $anchors { diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss index 5d38bab74..b7f2a5cd6 100644 --- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -12,6 +12,10 @@ } span { + @include type-style("body-2") { + margin: 0; + } + justify-self: end; color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; @@ -19,13 +23,9 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } -$sizes: small, medium, large; +$sizes: large, medium, small; @each $size in $sizes { $i: list.index($sizes, $size); diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss index 7f2108c1b..12a08912c 100644 --- a/src/app/data-display/badge/badge-size/badge-size.component.scss +++ b/src/app/data-display/badge/badge-size/badge-size.component.scss @@ -12,6 +12,10 @@ } span { + @include type-style("body-2") { + margin: 0; + } + justify-self: end; color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; @@ -19,10 +23,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } $sizes: small, medium, large; diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss index ae272a6dc..6564e975a 100644 --- a/src/app/data-display/badge/badge-type/badge-type.component.scss +++ b/src/app/data-display/badge/badge-type/badge-type.component.scss @@ -16,12 +16,14 @@ $types: dot, icon, text; } igx-avatar { - --ig-avatar-size: #{rem(40px)}; - grid-row: 1; } span { + @include type-style("caption") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -30,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("caption") { - margin: 0; - } } igx-badge { diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss index 8f88e19da..8f424300d 100644 --- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss @@ -20,6 +20,10 @@ igx-avatar { } span { + @include type-style("body-2") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -28,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-2") { - margin: 0; - } } igx-badge { diff --git a/src/app/data-entries/button/button-contained/button-contained.component.scss b/src/app/data-entries/button/button-contained/button-contained.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-contained/button-contained.component.scss +++ b/src/app/data-entries/button/button-contained/button-contained.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-download/button-download.component.scss b/src/app/data-entries/button/button-download/button-download.component.scss index 080967734..6c15ac51b 100644 --- a/src/app/data-entries/button/button-download/button-download.component.scss +++ b/src/app/data-entries/button/button-download/button-download.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample a { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-fab/button-fab.component.scss b/src/app/data-entries/button/button-fab/button-fab.component.scss index d41b93c4b..a6e649763 100644 --- a/src/app/data-entries/button/button-fab/button-fab.component.scss +++ b/src/app/data-entries/button/button-fab/button-fab.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2rem; + padding: rem(32px); } .button-sample button { - width: 45%; + inline-size: 45%; margin: auto; } diff --git a/src/app/data-entries/button/button-flat/button-flat.component.scss b/src/app/data-entries/button/button-flat/button-flat.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-flat/button-flat.component.scss +++ b/src/app/data-entries/button/button-flat/button-flat.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss index 02a12c790..056b6953e 100644 --- a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss +++ b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss @@ -1,34 +1,39 @@ -@use "igniteui-angular/theming" as *; +@use "igniteui-theming/sass/typography" as *; .button-container { display: flex; justify-content: center; align-items: center; - gap: 2rem; - padding: 1rem; + gap: rem(32px); + padding: rem(16px); } .button-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; --hover-background: var(--ig-contained-button-hover-background); --hover-foreground: var(--ig-contained-button-hover-foreground); --focus-background: var(--ig-contained-button-focus-background); --focus-foreground: var(--ig-contained-button-focus-foreground); --focus-hover-background: var(--ig-contained-button-focus-hover-background); --focus-hover-foreground: var(--ig-contained-button-focus-hover-foreground); + + display: flex; + flex-direction: column; + align-items: center; + gap: rem(12px); } .button-label { + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .button-item button.state-hover { diff --git a/src/app/data-entries/button/button-layout/button-layout.component.scss b/src/app/data-entries/button/button-layout/button-layout.component.scss index 7b8cb2563..2c18fa23c 100644 --- a/src/app/data-entries/button/button-layout/button-layout.component.scss +++ b/src/app/data-entries/button/button-layout/button-layout.component.scss @@ -1,24 +1,26 @@ +@use "igniteui-theming/sass/typography" as *; + .button-container { display: flex; align-items: center; justify-content: center; - gap: 1rem; - width: 100%; + gap: rem(16px); + inline-size: 100%; box-sizing: border-box; - padding: 2.5rem; + padding: rem(40px); } .button-item { display: flex; flex-direction: column; align-items: center; - gap: 0.75rem; + gap: rem(12px); } .button-container button { - --ig-font-family: 'Titillium Web', sans-serif; + --ig-font-family: "Titillium Web", sans-serif; --ig-button-text-transform: uppercase; - font-size: 0.85rem; - letter-spacing: 1px; + font-size: rem(13.6px); + letter-spacing: rem(1px); } diff --git a/src/app/data-entries/button/button-outlined/button-outlined.component.scss b/src/app/data-entries/button/button-outlined/button-outlined.component.scss index c98e6acd1..b88855d01 100644 --- a/src/app/data-entries/button/button-outlined/button-outlined.component.scss +++ b/src/app/data-entries/button/button-outlined/button-outlined.component.scss @@ -1,9 +1,11 @@ +@use "igniteui-theming/sass/typography" as *; + .button-sample { display: flex; - padding: 2.5rem; + padding: rem(40px); } .button-sample button { - width: 46%; + inline-size: 46%; margin: auto; } diff --git a/src/app/data-entries/button/button-overview/button-overview.component.scss b/src/app/data-entries/button/button-overview/button-overview.component.scss index 6c2b3ea3c..574fa4daa 100644 --- a/src/app/data-entries/button/button-overview/button-overview.component.scss +++ b/src/app/data-entries/button/button-overview/button-overview.component.scss @@ -1,8 +1,10 @@ +@use "igniteui-theming/sass/typography" as *; + .form { display: flex; justify-content: center; - gap: 1.25rem; - padding: 2.5rem; + gap: rem(20px); + padding: rem(40px); } .form igx-avatar { @@ -12,9 +14,9 @@ .fields { display: flex; flex-direction: column; - gap: 1rem; - max-width: 260px; - width: 100%; + gap: rem(16px); + max-inline-size: rem(260px); + inline-size: 100%; } :host ::ng-deep .fields .igx-input-group__bundle { @@ -29,9 +31,10 @@ :host ::ng-deep .fields .igx-input-group__input { margin: 0; } + .actions { display: flex; justify-content: flex-end; - gap: 1rem; - margin-top: 0.5rem; + gap: rem(16px); + margin-block-start: rem(8px); } diff --git a/src/app/data-entries/button/button-size/button-size.component.scss b/src/app/data-entries/button/button-size/button-size.component.scss index 58d897c92..9495ea135 100644 --- a/src/app/data-entries/button/button-size/button-size.component.scss +++ b/src/app/data-entries/button/button-size/button-size.component.scss @@ -1,3 +1,5 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; justify-content: center; @@ -7,45 +9,58 @@ .size-grid { display: flex; flex-direction: column; - gap: 1.25rem; - padding: 1rem; - width: 100%; + gap: rem(20px); + padding: rem(16px); + inline-size: 100%; box-sizing: border-box; overflow: hidden; } .size-row { display: grid; - grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + grid-template-columns: rem(70px) repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; - column-gap: 1rem; - row-gap: 0.5rem; - width: 100%; + column-gap: rem(16px); + row-gap: rem(8px); + inline-size: 100%; } .size-header { + @include type-style("body-2") { + margin: 0; + } + display: grid; - grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + grid-template-columns: rem(70px) repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; - column-gap: 1rem; - width: 100%; + column-gap: rem(16px); + inline-size: 100%; color: var(--ig-gray-600); - font: 13px/20px "Aktiv Grotesk", sans-serif; - letter-spacing: .3px; + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + line-height: rem(20px); + letter-spacing: rem(0.3px); } .size-label { + @include type-style("body-2") { + margin: 0; + } + justify-self: start; color: var(--ig-gray-600); - font: 400 13px/20px "Aktiv Grotesk", sans-serif; - letter-spacing: .3px; + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .size-row button { - width: auto; - transform: scale(.9); + inline-size: auto; + transform: scale(0.9); } .size-small { diff --git a/src/app/data-entries/button/button-states/button-states.component.scss b/src/app/data-entries/button/button-states/button-states.component.scss index 3b224d140..b12c4d0ae 100644 --- a/src/app/data-entries/button/button-states/button-states.component.scss +++ b/src/app/data-entries/button/button-states/button-states.component.scss @@ -1,14 +1,16 @@ +@use "igniteui-theming/sass/typography" as *; + .button-container { display: flex; justify-content: center; align-items: center; - gap: 2rem; - padding: 2rem; + gap: rem(32px); + padding: rem(32px); } .button-item { display: flex; flex-direction: column; align-items: center; - gap: 1.5rem; + gap: rem(24px); } diff --git a/src/app/data-entries/button/button-styling/button-styling.component.scss b/src/app/data-entries/button/button-styling/button-styling.component.scss index 4637a2cce..79bfbfc37 100644 --- a/src/app/data-entries/button/button-styling/button-styling.component.scss +++ b/src/app/data-entries/button/button-styling/button-styling.component.scss @@ -1,13 +1,41 @@ -@use "layout.scss"; +@use "igniteui-angular/theming" as *; +@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; -// CSS variables approach +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + block-size: 100%; + gap: rem(24px); + padding: rem(16px); +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: rem(48px); +} + +.button-row button.confirm-button, +.button-row button.send-button, +.button-row button.cancel-button { + block-size: rem(40px); + min-block-size: rem(40px); + inline-size: 90%; +} .confirm-button { --background: #1275c4; --foreground: #fff; --hover-background: #1275c4; --hover-foreground: #fff; - &:hover { --hover-background: #0b4f8a; } + + &:hover { + --hover-background: #0b4f8a; + } } .send-button { @@ -18,13 +46,23 @@ --hover-foreground: #8a2be2; --icon-color: #8a2be2; --icon-color-hover: #8a2be2; - &:hover { --hover-background: #8a2be2; --hover-border-color: #6a1bb1; --hover-foreground: #fff; --icon-color-hover: #fff; } + + &:hover { + --hover-background: #8a2be2; + --hover-border-color: #6a1bb1; + --hover-foreground: #fff; + --icon-color-hover: #fff; + } } .cancel-button { --foreground: #1275c4; --hover-foreground: #1275c4; - &:hover { --hover-background: #dbeeff; --hover-foreground: #063b68; } + + &:hover { + --hover-background: #dbeeff; + --hover-foreground: #063b68; + } } .add-button { @@ -35,5 +73,10 @@ --icon-color: #000; --icon-color-hover: #000; --border-radius: 999px; - &:hover { --hover-background: #257a2b; --hover-foreground: #fff; --icon-color-hover: #fff; } + + &:hover { + --hover-background: #257a2b; + --hover-foreground: #fff; + --icon-color-hover: #fff; + } } diff --git a/src/app/data-entries/button/button-styling/layout.scss b/src/app/data-entries/button/button-styling/layout.scss deleted file mode 100644 index a77566283..000000000 --- a/src/app/data-entries/button/button-styling/layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; -@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; - -.bootstrap-theme { - ::ng-deep { - @include button( - $flat: flat-button-theme($schema: $light-bootstrap-schema), - $contained: contained-button-theme($schema: $light-bootstrap-schema), - $outlined: outlined-button-theme($schema: $light-bootstrap-schema), - $fab: fab-button-theme($schema: $light-bootstrap-schema) - ); - @include button.component(); - } -} - -.button-row button.confirm-button, -.button-row button.send-button, -.button-row button.cancel-button { - height: 40px; - min-height: 40px; - width: 90%; -} - -.button-grid { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - gap: 1.5rem; - padding: 1rem; -} - -.button-row { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - align-items: center; - justify-items: center; - gap: 3rem; -} diff --git a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html index 0a6427ed8..f715c6ab1 100644 --- a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html +++ b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.html @@ -1,12 +1,20 @@ -
-
- - + - - + diff --git a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss index f0ca253bc..c37803f99 100644 --- a/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss +++ b/src/app/data-entries/button/button-tailwind-styling/button-tailwind-styling.component.scss @@ -1,6 +1 @@ -@use "layout.scss"; - -.confirm-button { --hover-background: #3730a3; --hover-foreground: #fff; } -.send-button { --hover-background: #db2777; --hover-border-color: #be185d; --hover-foreground: #fff; --icon-color-hover: #fff; } -.cancel-button { --hover-background: #fef3c7; --hover-foreground: #78350f; } -.add-button { --hover-background: #0f766e; --hover-foreground: #fff; --icon-color-hover: #fff; } +@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; diff --git a/src/app/data-entries/button/button-tailwind-styling/layout.scss b/src/app/data-entries/button/button-tailwind-styling/layout.scss deleted file mode 100644 index df3c97ac6..000000000 --- a/src/app/data-entries/button/button-tailwind-styling/layout.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/button/button-component" as button; -@use "igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"; - -:host { - ::ng-deep { - @include button( - $flat: flat-button-theme($schema: $light-bootstrap-schema), - $contained: contained-button-theme($schema: $light-bootstrap-schema), - $outlined: outlined-button-theme($schema: $light-bootstrap-schema), - $fab: fab-button-theme($schema: $light-bootstrap-schema) - ); - @include button.component(); - } -} - -.button-row button.confirm-button, -.button-row button.send-button, -.button-row button.cancel-button { - height: 40px; - min-height: 40px; - width: 90%; -} - -.confirm-button { - --background: #4338ca; - --foreground: #fff; - --hover-background: #4338ca; - --hover-foreground: #fff; -} - -.send-button { - --background: transparent; - --border-color: #db2777; - --foreground: #db2777; - --hover-border-color: #db2777; - --hover-foreground: #db2777; - --icon-color: #db2777; - --icon-color-hover: #db2777; -} - -.cancel-button { - --foreground: #b45309; - --hover-foreground: #b45309; -} - -.add-button { - --background: #14b8a6; - --foreground: #000; - --hover-background: #14b8a6; - --hover-foreground: #000; - --icon-color: #fff; - --icon-color-hover: #fff; - --border-radius: 9999px; - background-color: #14b8a6; -} diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 37cdf8360..f70539d8f 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -17,10 +17,13 @@ igx-buttongroup { } .album-title { - @include type-style('body-2'); - - margin-block: 0 rem(8px); - color: var(--ig-primary-500); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + margin: rem(8px); } .album-photos { diff --git a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss index 28c0265f9..df38e2180 100644 --- a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss +++ b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss @@ -1,15 +1,17 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; min-block-size: 100%; box-sizing: border-box; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { - --variant-gap: 60px; - --label-gap: 30px; + --variant-gap: #{rem(60px)}; + --label-gap: #{rem(30px)}; display: flex; align-items: center; @@ -23,8 +25,15 @@ } .states__label { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } diff --git a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss index d36f357ba..39fbc06cb 100644 --- a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss +++ b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss @@ -1,21 +1,30 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { display: grid; grid-template-columns: repeat(4, auto); align-items: center; - gap: 32px 24px; + gap: rem(32px) rem(24px); .states__column, .states__row { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } .states__column { diff --git a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss index 9cb1380aa..50c46cadc 100644 --- a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss +++ b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss @@ -1,15 +1,17 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; min-block-size: 100%; box-sizing: border-box; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .variants { - --variant-gap: 60px; - --label-gap: 30px; + --variant-gap: #{rem(60px)}; + --label-gap: #{rem(30px)}; display: flex; inline-size: 100%; @@ -24,8 +26,15 @@ } .variants__label { - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } diff --git a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss index 4eb2dd76b..228c27b9e 100644 --- a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss +++ b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss @@ -1,38 +1,46 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .notifications { inline-size: 100%; - max-inline-size: 384px; + max-inline-size: rem(384px); background: var(--ig-surface-500); - border-radius: 4px; + border-radius: rem(4px); overflow: hidden; .notifications__title { - margin: 0; - padding: 16px; - font: 400 10px / 16px "Titillium Web", sans-serif; - letter-spacing: 1.5px; + @include type-style("overline") { + margin: 0; + } + + padding: rem(16px); text-transform: uppercase; color: var(--ig-secondary-500); + font-family: "Titillium Web", sans-serif; + font-size: rem(10px); + font-weight: 400; + line-height: rem(16px); + letter-spacing: rem(1.5px); } .notifications__row { - padding-block: 12px; - padding-inline: 16px; + padding-block: rem(12px); + padding-inline: rem(16px); igx-switch { inline-size: 100%; justify-content: space-between; - gap: 16px; - transform: translateX(-10px); + gap: rem(16px); + transform: translateX(rem(-10px)); ::ng-deep .igx-switch__composite { - transform: translateX(8px); + transform: translateX(rem(8px)); } } } @@ -41,17 +49,33 @@ .option { display: flex; flex-direction: column; - gap: 2px; + gap: rem(2px); text-align: start; white-space: normal; .option__label { - font-size: 16px; + @include type-style("body-1") { + margin: 0; + } + color: var(--ig-gray-900); + font-family: "Titillium Web", sans-serif; + font-size: rem(16px); + font-weight: 400; + line-height: rem(24px); + letter-spacing: rem(0.15px); } .option__hint { - font-size: 13px; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-700); + font-family: "Titillium Web", sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); } } diff --git a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss index 3b46e3454..a7eac7e45 100644 --- a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss +++ b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss @@ -1,25 +1,34 @@ +@use "igniteui-theming/sass/typography" as *; + :host { display: flex; place-content: center; place-items: center; - padding: 16px; + padding: rem(16px); } .states { display: grid; grid-template-columns: repeat(3, auto); align-items: center; - gap: 32px; - transform: translateY(16px); + gap: rem(32px); + transform: translateY(rem(16px)); .states__row { + @include type-style("body-2") { + margin: 0; + } + text-align: end; - font: 500 14px / 24px "Aktiv Grotesk", sans-serif; - letter-spacing: 0.1px; color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } .states__disabled { - margin-inline-start: 16px; + margin-inline-start: rem(16px); } } diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 1bcc8dcda..e7aba6915 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,9 +1,4 @@ -@use "igniteui-angular/theming" as *; - -:host ::ng-deep igx-switch .igx-switch__thumb { - min-width: 10px; - transform: translateY(-1px); -} +@use "igniteui-theming/sass/typography" as *; :host ::ng-deep igx-switch .igx-switch__ripple { display: none; @@ -14,26 +9,26 @@ place-content: center; place-items: center; min-block-size: 100%; - padding: 1rem; + padding: rem(16px); } .security { display: block; inline-size: 100%; - max-inline-size: 348px; + max-inline-size: rem(348px); background: var(--ig-surface-500); border: rem(1px) solid var(--ig-gray-300); border-radius: rem(16px); - box-shadow: 0 rem(1px) rem(3px) rgb(0 0 0 / 12%); + box-shadow: 0 rem(1px) rem(3px) hsl(from var(--ig-gray-900) h s l / 0.12); overflow: hidden; igx-expansion-panel-header { - display: block !important; + display: block; } ::ng-deep igx-expansion-panel-header > div { - padding: rem(12px) rem(16px) !important; - gap: rem(16px) !important; + padding: rem(12px) rem(16px); + gap: rem(16px); } igx-expansion-panel-title { @@ -54,9 +49,27 @@ } igx-switch { - inline-size: rem(43px); - block-size: rem(24px); - transform: translateX(rem(2px)); + --switch-width: #{rem(32px)}; + --switch-height: #{rem(16px)}; + --switch-thumb-size: #{rem(10px)}; + --switch-on-offset: #{rem(4px)}; + --switch-off-offset: calc(var(--switch-thumb-size) / 4); + --transform-thumb: calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-on-offset)); + + --ig-switch-border-color: var(--ig-gray-400); + --ig-switch-border-hover-color: var(--ig-gray-500); + --ig-switch-border-on-color: var(--ig-primary-500); + --ig-switch-border-on-hover-color: var(--ig-primary-600); + --ig-switch-track-off-color: var(--ig-gray-900-contrast); + --ig-switch-track-on-color: var(--ig-primary-500); + --ig-switch-track-on-hover-color: var(--ig-primary-600); + --ig-switch-thumb-off-color: var(--ig-gray-400); + --ig-switch-thumb-off-hover-color: var(--ig-gray-500); + --ig-switch-thumb-on-color: var(--ig-primary-800-contrast); + --ig-switch-border-radius-track: #{rem(32px)}; + --ig-switch-border-radius-thumb: #{rem(32px)}; + --ig-switch-resting-elevation: none; + --ig-switch-hover-elevation: none; } igx-radio-group { @@ -76,26 +89,47 @@ min-inline-size: 0; .option__label { - font: 600 #{rem(16px)} / #{rem(24px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.15px)}; + @include type-style("body-1") { + margin: 0; + } + color: var(--ig-gray-700); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(16px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.15px); } .option__hint { - font: 500 #{rem(14px)} / #{rem(24px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.1px)}; + @include type-style("body-2") { + margin: 0; + } + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); } } igx-radio { - font: 600 #{rem(12px)} / #{rem(16px)} "Aktiv Grotesk", sans-serif; - letter-spacing: #{rem(0.15px)}; - color: var(--ig-primary-900); + @include type-style("caption") { + margin: 0; + } --fill-color: var(--ig-primary-500); --fill-color-hover: var(--ig-primary-500); --fill-hover-border-color: var(--ig-primary-500); + + color: var(--ig-primary-900); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(12px); + font-weight: 600; + line-height: rem(16px); + letter-spacing: rem(0.15px); } :host ::ng-deep igx-radio.igx-radio--checked .igx-radio__composite::after { @@ -104,24 +138,24 @@ igx-radio { } :host ::ng-deep igx-radio.igx-radio--checked .igx-radio__composite::before { - transform: none !important; + transform: none; } :host ::ng-deep igx-radio .igx-radio__composite::before, :host ::ng-deep igx-radio .igx-radio__composite::after { - width: 16px; - height: 16px; + inline-size: rem(16px); + block-size: rem(16px); } :host ::ng-deep igx-radio .igx-radio__label { - transform: translateY(-2px); + transform: translateY(rem(-2px)); } :host ::ng-deep igx-radio .igx-radio__composite, :host ::ng-deep igx-radio .igx-radio__composite::before, :host ::ng-deep igx-radio .igx-radio__composite::after { - animation: none !important; - transition: none !important; + animation: none; + transition: none; } :host ::ng-deep igx-radio .igx-radio__ripple { diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss index 20b66dbc1..a46ea1b47 100644 --- a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss +++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss @@ -1,14 +1,16 @@ +@use "igniteui-theming/sass/typography" as *; + :host ::ng-deep igx-switch .igx-switch__thumb { - min-width: 10px; + min-inline-size: rem(10px); } :host ::ng-deep igx-switch .igx-switch__ripple { - display: none; + display: none; } :host { - display: flex; - place-content: center; - place-items: center; - padding: 40px; + display: flex; + place-content: center; + place-items: center; + padding: rem(40px); } diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss index cbaac2cdc..063dc6efa 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -20,6 +20,10 @@ igx-avatar { } span { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -28,10 +32,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } igx-badge { diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss index 119e5278c..9544268cc 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss @@ -18,6 +18,10 @@ igx-avatar { } span { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -26,10 +30,6 @@ span { font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } igx-badge { diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss index 25fc17d77..dbd7fcc9c 100644 --- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss +++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss @@ -21,6 +21,10 @@ $avatars: circle, square, rounded; } :where(span) { + @include type-style("body-1") { + margin: 0; + } + grid-row: 2; text-align: center; color: var(--ig-gray-600); @@ -29,10 +33,6 @@ $avatars: circle, square, rounded; font-weight: 400; line-height: rem(20px); letter-spacing: rem(0.3px); - - @include type-style("body-1") { - margin: 0; - }; } :where(igx-badge) { diff --git a/src/styles.scss b/src/styles.scss index 03a2dd70b..35f718c8e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -27,28 +27,6 @@ body { margin: 0; } -// Nothing here paints a page background per color mode on purpose. The sample -// is embedded in an iframe and the documentation's Sample component draws the -// surface behind it from the same mode the theming widget posts down here, so -// the iframe is left transparent for it to show through. `ThemeService` still -// reflects `data-ig-theme` / `data-ig-mode` onto the root element for samples -// that need to react to the selection themselves. - -body.custom-body:has( - app-badge-overview, - app-badge-styling, - app-badge-dot, - app-badge-type, - app-badge-icon, - app-badge-size, - app-badge-shape, - app-badge-variants, - app-badge-outlined, - app-badge-tailwind-styling -) { - background: transparent; -} - // `core()`, `typography()`, `theme()` and the root palette all ship inside the // prebuilt stylesheets loaded through the `igniteui-theme` link (see above). From 162ae1e4614c90c4d0a034b7f26ac25956fd1772 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Thu, 22 Oct 2026 10:23:59 +0300 Subject: [PATCH 3/6] feat(card): update samples content (#4061) * feat(card): update samples content * fix(card): update samples styling --- live-editing/configs/CardConfigGenerator.ts | 46 ++--- .../configs/OverlayConfigGenerator.ts | 10 +- .../overlay-main-sample-2.component.ts | 4 +- .../overlay-main-sample-3.component.html | 2 +- .../overlay-main-sample-3.component.ts | 4 +- .../card-actions/card-actions.component.html | 74 ++++++++ .../card-actions/card-actions.component.scss | 107 +++++++++++ .../card-actions/card-actions.component.ts | 41 +++++ src/app/layouts/card/card-actions/icons.ts | 1 + .../card/card-media/card-media.component.html | 58 ++++++ .../card/card-media/card-media.component.scss | 74 ++++++++ .../card/card-media/card-media.component.ts | 38 ++++ src/app/layouts/card/card-media/icons.ts | 1 + .../card-overview.component.html | 60 ++++++ .../card-overview.component.scss | 41 +++++ .../card-overview/card-overview.component.ts | 45 +++++ .../card-position.component.html | 43 +++++ .../card-position.component.scss | 101 ++++++++++ .../card-position/card-position.component.ts | 33 ++++ .../card-sample-1.component.html | 21 --- .../card-sample-1.component.scss | 8 - .../card-sample-1/card-sample-1.component.ts | 22 --- .../card-sample-2.component.html | 27 --- .../card-sample-2.component.scss | 4 - .../card-sample-2.component.spec.ts | 25 --- .../card-sample-2/card-sample-2.component.ts | 26 --- .../card-sample-3.component.html | 27 --- .../card-sample-3.component.scss | 4 - .../card-sample-3.component.spec.ts | 25 --- .../card-sample-3/card-sample-3.component.ts | 28 --- .../card-sample-4.component.html | 131 ------------- .../card-sample-4.component.scss | 163 ----------------- .../card-sample-4/card-sample-4.component.ts | 120 ------------ .../card-styling-sample.component.html | 32 ---- .../card-styling-sample.component.scss | 76 -------- .../card-styling-sample.component.ts | 30 --- .../card/card-styling-sample/layout.scss | 79 -------- .../card-styling/card-styling.component.html | 37 ++++ .../card-styling/card-styling.component.scss | 173 ++++++++++++++++++ .../card-styling/card-styling.component.ts | 34 ++++ ...ard-tailwind-styling-sample.component.html | 28 --- ...ard-tailwind-styling-sample.component.scss | 1 - .../card-tailwind-styling-sample.component.ts | 28 --- .../card-tailwind-styling-sample/layout.scss | 4 - .../card-tailwind-styling.component.html | 105 +++++++++++ .../card-tailwind-styling.component.scss | 36 ++++ .../card-tailwind-styling.component.ts | 51 ++++++ .../card/card-tailwind-styling/icons.ts | 11 ++ src/app/layouts/card/card.blueprint.ts | 68 ------- src/app/layouts/card/card.component.html | 31 ---- src/app/layouts/card/card.component.scss | 4 - src/app/layouts/card/card.component.spec.ts | 25 --- src/app/layouts/card/card.component.ts | 27 --- src/app/layouts/layouts-routes-data.ts | 13 +- src/app/layouts/layouts.routes.ts | 54 +++--- 55 files changed, 1221 insertions(+), 1140 deletions(-) create mode 100644 src/app/layouts/card/card-actions/card-actions.component.html create mode 100644 src/app/layouts/card/card-actions/card-actions.component.scss create mode 100644 src/app/layouts/card/card-actions/card-actions.component.ts create mode 100644 src/app/layouts/card/card-actions/icons.ts create mode 100644 src/app/layouts/card/card-media/card-media.component.html create mode 100644 src/app/layouts/card/card-media/card-media.component.scss create mode 100644 src/app/layouts/card/card-media/card-media.component.ts create mode 100644 src/app/layouts/card/card-media/icons.ts create mode 100644 src/app/layouts/card/card-overview/card-overview.component.html create mode 100644 src/app/layouts/card/card-overview/card-overview.component.scss create mode 100644 src/app/layouts/card/card-overview/card-overview.component.ts create mode 100644 src/app/layouts/card/card-position/card-position.component.html create mode 100644 src/app/layouts/card/card-position/card-position.component.scss create mode 100644 src/app/layouts/card/card-position/card-position.component.ts delete mode 100644 src/app/layouts/card/card-sample-1/card-sample-1.component.html delete mode 100644 src/app/layouts/card/card-sample-1/card-sample-1.component.scss delete mode 100644 src/app/layouts/card/card-sample-1/card-sample-1.component.ts delete mode 100644 src/app/layouts/card/card-sample-2/card-sample-2.component.html delete mode 100644 src/app/layouts/card/card-sample-2/card-sample-2.component.scss delete mode 100644 src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts delete mode 100644 src/app/layouts/card/card-sample-2/card-sample-2.component.ts delete mode 100644 src/app/layouts/card/card-sample-3/card-sample-3.component.html delete mode 100644 src/app/layouts/card/card-sample-3/card-sample-3.component.scss delete mode 100644 src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts delete mode 100644 src/app/layouts/card/card-sample-3/card-sample-3.component.ts delete mode 100644 src/app/layouts/card/card-sample-4/card-sample-4.component.html delete mode 100644 src/app/layouts/card/card-sample-4/card-sample-4.component.scss delete mode 100644 src/app/layouts/card/card-sample-4/card-sample-4.component.ts delete mode 100644 src/app/layouts/card/card-styling-sample/card-styling-sample.component.html delete mode 100644 src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss delete mode 100644 src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts delete mode 100644 src/app/layouts/card/card-styling-sample/layout.scss create mode 100644 src/app/layouts/card/card-styling/card-styling.component.html create mode 100644 src/app/layouts/card/card-styling/card-styling.component.scss create mode 100644 src/app/layouts/card/card-styling/card-styling.component.ts delete mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html delete mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss delete mode 100644 src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts delete mode 100644 src/app/layouts/card/card-tailwind-styling-sample/layout.scss create mode 100644 src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html create mode 100644 src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss create mode 100644 src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts create mode 100644 src/app/layouts/card/card-tailwind-styling/icons.ts delete mode 100644 src/app/layouts/card/card.blueprint.ts delete mode 100644 src/app/layouts/card/card.component.html delete mode 100644 src/app/layouts/card/card.component.scss delete mode 100644 src/app/layouts/card/card.component.spec.ts delete mode 100644 src/app/layouts/card/card.component.ts diff --git a/live-editing/configs/CardConfigGenerator.ts b/live-editing/configs/CardConfigGenerator.ts index 2a565b253..26ec0aa60 100644 --- a/live-editing/configs/CardConfigGenerator.ts +++ b/live-editing/configs/CardConfigGenerator.ts @@ -1,11 +1,9 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar'; -import { IgxButtonModule, IgxDividerModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/directives'; +import { IgxButtonModule, IgxDividerModule, IgxRippleModule } from 'igniteui-angular/directives'; import { IgxCardModule } from 'igniteui-angular/card'; import { IgxChipsModule } from 'igniteui-angular/chips'; -import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel'; import { IgxIconModule } from 'igniteui-angular/icon'; -import { IgxListModule } from 'igniteui-angular/list'; -import { IgxSliderModule } from 'igniteui-angular/slider'; +import { IgxSwitchModule } from 'igniteui-angular/switch'; import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing' import { BaseAppConfig } from './BaseConfig'; export class CardConfigGenerator implements IConfigGenerator { @@ -14,63 +12,53 @@ export class CardConfigGenerator implements IConfigGenerator { public generateConfigs(): Config[] { const configs = new Array(); - // card sample + // card overview configs.push(new Config({ - component: 'CardComponent', + component: 'CardOverviewComponent', appConfig: BaseAppConfig, - additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts" - ], shortenComponentPathBy: "/layouts/card/" })); - // card sample 1 + // card actions configs.push(new Config({ - component: 'CardSample1Component', + component: 'CardActionsComponent', appConfig: BaseAppConfig, additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts" + "/src/app/layouts/card/card-actions/icons.ts" ], shortenComponentPathBy: "/layouts/card/" })); - // card sample 2 + // card media configs.push(new Config({ - component: 'CardSample2Component', + component: 'CardMediaComponent', appConfig: BaseAppConfig, additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts" + "/src/app/layouts/card/card-media/icons.ts" ], shortenComponentPathBy: "/layouts/card/" })); - // card sample 3 + // card media position configs.push(new Config({ - component: 'CardSample3Component', + component: 'CardPositionComponent', appConfig: BaseAppConfig, - additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts" - ], shortenComponentPathBy: "/layouts/card/" })); - // card sample 4 + // card styling configs.push(new Config({ - component: 'CardSample4Component', + component: 'CardStylingComponent', appConfig: BaseAppConfig, - additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts" - ], shortenComponentPathBy: "/layouts/card/" })); - // card styling sample + // card tailwind styling configs.push(new Config({ - component: 'CardStylingSampleComponent', + component: 'CardTailwindStylingComponent', appConfig: BaseAppConfig, additionalFiles: [ - "/src/app/layouts/card/card.blueprint.ts", - "/src/app/layouts/card/card-styling-sample/layout.scss" + "/src/app/layouts/card/card-tailwind-styling/icons.ts" ], shortenComponentPathBy: "/layouts/card/" })); diff --git a/live-editing/configs/OverlayConfigGenerator.ts b/live-editing/configs/OverlayConfigGenerator.ts index e45740b99..5e6ecfda1 100644 --- a/live-editing/configs/OverlayConfigGenerator.ts +++ b/live-editing/configs/OverlayConfigGenerator.ts @@ -25,11 +25,11 @@ export class OverlayConfigGenerator implements IConfigGenerator { configs.push(new Config({ component: 'OverlaySampleMain2Component', - additionalFiles: ["/src/app/layouts/card/card-sample-1/card-sample-1.component.ts", - "/src/app/layouts/card/card-sample-1/card-sample-1.component.scss", - "/src/app/layouts/card/card-sample-1/card-sample-1.component.html", - "/src/app/layouts/card/card.blueprint.ts"], - appConfig: BaseAppConfig + additionalFiles: ["/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.ts", + "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.scss", + "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.html"], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/interactions/overlay/" })); configs.push(new Config({ diff --git a/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts b/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts index 92b7b5949..d5f8caa81 100644 --- a/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts +++ b/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core'; import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; -import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component'; +import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component'; // tslint:disable:object-literal-sort-keys @Component({ selector: 'app-overlay-sample', @@ -23,7 +23,7 @@ export class OverlaySampleMain2Component implements OnDestroy { if (this._cardHidden) { if (!this._overlayId) { const positionStrategy = new ConnectedPositioningStrategy(); - this._overlayId = this.overlayService.attach(CardSample1Component, this.viewContainerRef, { + this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, { target: this.buttonElement.nativeElement, positionStrategy, modal: false, diff --git a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html index 139c885b3..2b8cc554d 100644 --- a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html +++ b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html @@ -2,5 +2,5 @@ - +
\ No newline at end of file diff --git a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts index dff46042d..0f9a0764f 100644 --- a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts +++ b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts @@ -1,13 +1,13 @@ import { Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core'; import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; -import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component'; +import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component'; // tslint:disable:object-literal-sort-keys @Component({ selector: 'app-overlay-sample', templateUrl: `overlay-main-sample-3.component.html`, styleUrls: ['overlay-main-sample-3.component.scss'], - imports: [IgxButtonDirective, CardSample1Component] + imports: [IgxButtonDirective, MyDynamicCardComponent] }) export class OverlaySampleMain3Component implements OnDestroy { private overlayService = inject(IgxOverlayService); diff --git a/src/app/layouts/card/card-actions/card-actions.component.html b/src/app/layouts/card/card-actions/card-actions.component.html new file mode 100644 index 000000000..ef78bed49 --- /dev/null +++ b/src/app/layouts/card/card-actions/card-actions.component.html @@ -0,0 +1,74 @@ +
+ Horizontal actions (default) + + + + + + Lena Fischer + @lena · 2h ago + + +

+ Just shipped our new design system 🚀 Six months of tokens, + components, and documentation — and it’s finally live. + So proud of the team. +

+ + + + + + + +
+ +
+ Vertical actions + + +
+ + + + Lena Fischer + @lena · 2h ago + + +

+ Just shipped our new design system 🚀 Six months of tokens, + components, and documentation — and it’s finally live. + So proud of the team. +

+ +
+ + +
+ + + +
+ + +
diff --git a/src/app/layouts/card/card-actions/card-actions.component.scss b/src/app/layouts/card/card-actions/card-actions.component.scss new file mode 100644 index 000000000..ce9716faa --- /dev/null +++ b/src/app/layouts/card/card-actions/card-actions.component.scss @@ -0,0 +1,107 @@ +@use "igniteui-theming/sass/typography" as *; + +:host { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: center; + box-sizing: border-box; + height: 100vh; + gap: rem(48px); + padding: rem(40px) rem(24px); +} + +.card-item { + display: flex; + flex-direction: column; + align-items: center; + gap: rem(20px); +} + +.card-item__label { + @include type-style("body-2") { + margin: 0; + } + + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); +} + +.post-card { + --ig-card-border-radius: #{rem(8px)}; + + width: rem(310px); + + igx-card-header { + padding: rem(16px) rem(16px) 0; + } + + [igxCardHeaderTitle] { + color: var(--ig-gray-900); + font-size: rem(20px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.15px); + } + + [igxCardHeaderSubtitle] { + color: var(--ig-gray-600); + font-size: rem(14px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.1px); + } + + igx-card-content { + padding: rem(24px) rem(16px) 0; + overflow: visible; + + p { + margin: 0; + color: var(--ig-gray-700); + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); + } + } + + igx-card-actions { + padding: rem(12px) rem(16px) rem(8px); + } + + [igxIconButton] { + --ig-size: var(--ig-size-small); + --ig-flat-icon-button-foreground: var(--ig-gray-900); + } +} + +.post-card--vertical { + width: rem(390px); + + igx-card-content { + padding-block-end: rem(16px); + } + + igx-card-actions { + justify-content: flex-start; + padding: rem(16px) rem(16px) rem(16px) 0; + } +} + +.post-card__body { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; +} + +.post-card__actions { + display: flex; + flex-direction: column; + gap: rem(8px); +} diff --git a/src/app/layouts/card/card-actions/card-actions.component.ts b/src/app/layouts/card/card-actions/card-actions.component.ts new file mode 100644 index 000000000..27ecfebfd --- /dev/null +++ b/src/app/layouts/card/card-actions/card-actions.component.ts @@ -0,0 +1,41 @@ +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardThumbnailDirective +} from 'igniteui-angular/card'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { linkedinIcon } from './icons'; + +@Component({ + selector: 'app-card-actions', + styleUrls: ['./card-actions.component.scss'], + templateUrl: './card-actions.component.html', + imports: [ + IgxAvatarComponent, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardThumbnailDirective, + IgxIconButtonDirective, + IgxIconComponent, + IgxSuffixDirective + ] +}) +export class CardActionsComponent { + private iconService = inject(IgxIconService); + + constructor() { + this.iconService.addSvgIconFromText('linkedin', linkedinIcon, 'material'); + } +} diff --git a/src/app/layouts/card/card-actions/icons.ts b/src/app/layouts/card/card-actions/icons.ts new file mode 100644 index 000000000..63e5078e4 --- /dev/null +++ b/src/app/layouts/card/card-actions/icons.ts @@ -0,0 +1 @@ +export const linkedinIcon = ''; diff --git a/src/app/layouts/card/card-media/card-media.component.html b/src/app/layouts/card/card-media/card-media.component.html new file mode 100644 index 000000000..69a1d0a6c --- /dev/null +++ b/src/app/layouts/card/card-media/card-media.component.html @@ -0,0 +1,58 @@ + + + A meeting room with a long table and chairs + + + Book your meeting room + Max 15 seats / 10 m2 + + +
+ videocam + bluetooth + volume_off +
+ + + + + + + A street map with the event space marked + + + Main Event Space + Floor 4, Suite 402 + + +
+ directions_bus + directions_car + flight +
+ + + + + + + A map of Europe showing the sales region + + + View your coverage area + Sales region + + +
+ place + +
+ + + diff --git a/src/app/layouts/card/card-media/card-media.component.scss b/src/app/layouts/card/card-media/card-media.component.scss new file mode 100644 index 000000000..bd636620c --- /dev/null +++ b/src/app/layouts/card/card-media/card-media.component.scss @@ -0,0 +1,74 @@ +@use "igniteui-theming/sass/typography" as *; + +:host { + display: flex; + flex-flow: row wrap; + align-content: center; + align-items: flex-start; + justify-content: center; + box-sizing: border-box; + height: 100vh; + gap: rem(20px); + padding: rem(32px) rem(8px); +} + +.media-card { + --ig-card-border-radius: #{rem(4px)}; + + flex: 1 1 rem(240px); + max-width: rem(256px); + + igx-card-media img { + width: 100%; + height: 100%; + object-fit: cover; + } + + igx-card-header { + padding: rem(16px) rem(16px) 0; + } + + [igxCardHeaderTitle] { + margin-block-end: 0; + color: var(--ig-gray-900); + font-size: rem(18px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.15px); + } + + [igxCardHeaderSubtitle] { + color: var(--ig-gray-900); + font-size: rem(14px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.1px); + } + + igx-card-actions { + flex-wrap: nowrap; + padding: rem(24px) rem(16px) rem(12px); + } +} + +.media-card__icons { + display: inline-flex; + align-items: center; + gap: rem(4px); + color: var(--ig-gray-900); + + igx-icon { + --ig-icon-size: #{rem(16px)}; + } +} + +.media-card__action { + --ig-size: var(--ig-size-small); + + padding: 0; + background: transparent; + font-size: rem(13px); + font-weight: 600; + letter-spacing: rem(0.25px); + text-transform: uppercase; +} diff --git a/src/app/layouts/card/card-media/card-media.component.ts b/src/app/layouts/card/card-media/card-media.component.ts new file mode 100644 index 000000000..bec4a9b5e --- /dev/null +++ b/src/app/layouts/card/card-media/card-media.component.ts @@ -0,0 +1,38 @@ +import { Component, inject } from '@angular/core'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective +} from 'igniteui-angular/card'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { pinRightIcon } from './icons'; + +@Component({ + selector: 'app-card-media', + styleUrls: ['./card-media.component.scss'], + templateUrl: './card-media.component.html', + imports: [ + IgxButtonDirective, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxIconComponent, + IgxPrefixDirective, + IgxSuffixDirective + ] +}) +export class CardMediaComponent { + private iconService = inject(IgxIconService); + + constructor() { + this.iconService.addSvgIconFromText('pin-right', pinRightIcon, 'material'); + } +} diff --git a/src/app/layouts/card/card-media/icons.ts b/src/app/layouts/card/card-media/icons.ts new file mode 100644 index 000000000..dfc40a68c --- /dev/null +++ b/src/app/layouts/card/card-media/icons.ts @@ -0,0 +1 @@ +export const pinRightIcon = ''; diff --git a/src/app/layouts/card/card-overview/card-overview.component.html b/src/app/layouts/card/card-overview/card-overview.component.html new file mode 100644 index 000000000..e75b1be93 --- /dev/null +++ b/src/app/layouts/card/card-overview/card-overview.component.html @@ -0,0 +1,60 @@ +
+ + Media + + + Header + + + Content + + + Actions + +
+ +
+ + @if (media) { + + Mountain range above the clouds at sunset + + } + @if (header) { + + + + Title + Subtitle + + } + @if (content) { + +

+ A paragraph is a self-contained unit of a discourse in writing + dealing with a particular point or idea. +

+ + } + @if (actions) { + + + + + + + + } + +
diff --git a/src/app/layouts/card/card-overview/card-overview.component.scss b/src/app/layouts/card/card-overview/card-overview.component.scss new file mode 100644 index 000000000..52da7c822 --- /dev/null +++ b/src/app/layouts/card/card-overview/card-overview.component.scss @@ -0,0 +1,41 @@ +@use "igniteui-theming/sass/typography" as *; + +:host { + display: flex; + flex-direction: column; + align-items: center; + box-sizing: border-box; + height: 100vh; + gap: rem(72px); + padding: rem(56px) rem(24px); +} + +.card-options { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: rem(32px); +} + +.card-container { + --ig-size: var(--ig-size-small); + + width: 100%; + max-width: rem(360px); + min-width: rem(220px); + + igx-card-media img { + width: 100%; + aspect-ratio: 15 / 8; + object-fit: cover; + } + + igx-card-content p { + @include type-style("body-2") { + margin: 0; + } + + font-size: rem(14px); + line-height: 1.5; + } +} diff --git a/src/app/layouts/card/card-overview/card-overview.component.ts b/src/app/layouts/card/card-overview/card-overview.component.ts new file mode 100644 index 000000000..1d187ae17 --- /dev/null +++ b/src/app/layouts/card/card-overview/card-overview.component.ts @@ -0,0 +1,45 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective +} from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; + +@Component({ + selector: 'app-card-overview', + styleUrls: ['./card-overview.component.scss'], + templateUrl: './card-overview.component.html', + imports: [ + IgxAvatarComponent, + IgxButtonDirective, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective, + IgxIconButtonDirective, + IgxIconComponent, + IgxPrefixDirective, + IgxSuffixDirective, + IgxSwitchComponent + ] +}) +export class CardOverviewComponent { + public media = true; + public header = true; + public content = true; + public actions = true; +} diff --git a/src/app/layouts/card/card-position/card-position.component.html b/src/app/layouts/card/card-position/card-position.component.html new file mode 100644 index 000000000..d455ad3a4 --- /dev/null +++ b/src/app/layouts/card/card-position/card-position.component.html @@ -0,0 +1,43 @@ +
+ Media before header + + + + A meeting room with a long table and chairs + + + Book your meeting room + Max 15 seats / 10 m2 + + +
+ videocam + bluetooth + volume_off +
+ + + +
+ +
+ Media after header + + + + Book your meeting room + Max 15 seats / 10 m2 + + + A meeting room with a long table and chairs + + +
+ videocam + bluetooth + volume_off +
+ + + +
diff --git a/src/app/layouts/card/card-position/card-position.component.scss b/src/app/layouts/card/card-position/card-position.component.scss new file mode 100644 index 000000000..37b592575 --- /dev/null +++ b/src/app/layouts/card/card-position/card-position.component.scss @@ -0,0 +1,101 @@ +@use "igniteui-theming/sass/typography" as *; + +:host { + display: flex; + flex-flow: row wrap; + align-content: center; + align-items: flex-start; + justify-content: center; + box-sizing: border-box; + height: 100vh; + gap: rem(56px); + padding: rem(32px) rem(16px); +} + +.card-item { + display: flex; + flex-direction: column; + align-items: center; + gap: rem(20px); +} + +.card-item__label { + @include type-style("body-2") { + margin: 0; + } + + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); +} + +.position-card { + --ig-card-border-radius: #{rem(4px)}; + + width: rem(256px); + + igx-card-media img { + width: 100%; + height: 100%; + object-fit: cover; + } + + igx-card-header { + padding: rem(16px) rem(16px) 0; + } + + [igxCardHeaderTitle] { + margin-block-end: 0; + color: var(--ig-gray-900); + font-size: rem(18px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.15px); + } + + [igxCardHeaderSubtitle] { + color: var(--ig-gray-900); + font-size: rem(14px); + font-weight: 600; + line-height: rem(24px); + letter-spacing: rem(0.1px); + } + + igx-card-actions { + flex-wrap: nowrap; + padding: rem(24px) rem(24px) rem(8px); + } + + igx-card-header + igx-card-media { + margin-block-start: rem(8px); + } + + igx-card-media + igx-card-actions { + padding-block-start: rem(16px); + } +} + +.position-card__icons { + display: inline-flex; + align-items: center; + gap: rem(6px); + color: var(--ig-gray-900); + + igx-icon { + --ig-icon-size: #{rem(16px)}; + } +} + +.position-card__action { + --ig-size: var(--ig-size-small); + + padding: 0; + background: transparent; + font-size: rem(13px); + font-weight: 600; + letter-spacing: rem(0.25px); + text-transform: uppercase; +} diff --git a/src/app/layouts/card/card-position/card-position.component.ts b/src/app/layouts/card/card-position/card-position.component.ts new file mode 100644 index 000000000..ad7dc5d90 --- /dev/null +++ b/src/app/layouts/card/card-position/card-position.component.ts @@ -0,0 +1,33 @@ +import { Component } from '@angular/core'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective +} from 'igniteui-angular/card'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-card-position', + styleUrls: ['./card-position.component.scss'], + templateUrl: './card-position.component.html', + imports: [ + IgxButtonDirective, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderSubtitleDirective, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxIconComponent, + IgxPrefixDirective, + IgxSuffixDirective + ] +}) +export class CardPositionComponent { + public roomImage = 'https://dl.infragistics.com/x/img/card/card-2.png'; +} diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.html b/src/app/layouts/card/card-sample-1/card-sample-1.component.html deleted file mode 100644 index 2e9caf412..000000000 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
- - -
{{card.title}}
-
{{card.subtitle}}
- - - - - - - - - @for (icon of card.icons; track icon) { - - } - - -
diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.scss b/src/app/layouts/card/card-sample-1/card-sample-1.component.scss deleted file mode 100644 index 515ae890a..000000000 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} - -:host { - display: block; -} \ No newline at end of file diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts deleted file mode 100644 index 70b5e439f..000000000 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from '@angular/core'; -import { Card } from '../card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxSuffixDirective } from 'igniteui-angular/input-group'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-igx-card-simple', - styleUrls: ['./card-sample-1.component.scss'], - templateUrl: './card-sample-1.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] -}) -export class CardSample1Component { - public card = new Card({ - icons: ['skip_previous', 'play_arrow', 'skip_next'], - imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg', - subtitle: 'Under the Grave (2016)', - title: 'Rozes' - }); -} diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.html b/src/app/layouts/card/card-sample-2/card-sample-2.component.html deleted file mode 100644 index 90f34c8e5..000000000 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.html +++ /dev/null @@ -1,27 +0,0 @@ -
- -
- -
{{card.title}}
-
{{card.subtitle}}
- - - - - - -

{{card.content}}

- -
- - - - - @for (icon of card.icons; track icon) { - - } - - -
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.scss b/src/app/layouts/card/card-sample-2/card-sample-2.component.scss deleted file mode 100644 index bf69d1a0d..000000000 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts deleted file mode 100644 index 9c1cff66d..000000000 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; - -import { CardSample2Component } from './card-sample-2.component'; - -describe('CardSample2Component', () => { - let component: CardSample2Component; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [CardSample2Component] -}) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CardSample2Component); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts deleted file mode 100644 index e676655d2..000000000 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component } from '@angular/core'; -import { Card } from '../card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxSuffixDirective } from 'igniteui-angular/input-group'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-card-sample-2', - styleUrls: ['./card-sample-2.component.scss'], - templateUrl: './card-sample-2.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] -}) -export class CardSample2Component { - public card = new Card({ - content: `As I have always said: I write what's real and what's true, - even if it means throwing myself under the bus.`, - icons: ['skip_previous', 'play_arrow', 'skip_next'], - imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg', - subtitle: 'Under the Grave (2016)', - title: 'Rozes' - }); - - public horizontal = true; -} diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.html b/src/app/layouts/card/card-sample-3/card-sample-3.component.html deleted file mode 100644 index 813bc6421..000000000 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.html +++ /dev/null @@ -1,27 +0,0 @@ -
- -
- - -
{{card.title}}
-
{{card.subtitle}}
- - - -

{{card.content}}

- - - - @for (button of card.buttons; track button) { - - } - -
- - - - - -
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.scss b/src/app/layouts/card/card-sample-3/card-sample-3.component.scss deleted file mode 100644 index bf69d1a0d..000000000 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts b/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts deleted file mode 100644 index 3b9762130..000000000 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; - -import { CardSample3Component } from './card-sample-3.component'; - -describe('CardSample3Component', () => { - let component: CardSample3Component; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [CardSample3Component] -}) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CardSample3Component); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts b/src/app/layouts/card/card-sample-3/card-sample-3.component.ts deleted file mode 100644 index 24963119b..000000000 --- a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component } from '@angular/core'; -import { Card } from '../card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; - - -@Component({ - selector: 'app-card-sample-3', - styleUrls: ['./card-sample-3.component.scss'], - templateUrl: './card-sample-3.component.html', - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] -}) -export class CardSample3Component { - public horizontal = true; - - public card = new Card({ - avatarUrl: 'assets/images/card/avatars/mellow_d.jpg', - buttons: ['play album'], - content: `Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.`, - imageUrl: 'assets/images/card/media/here_media.jpg', - subtitle: 'by Mellow D', - title: 'HERE' - }); -} diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.html b/src/app/layouts/card/card-sample-4/card-sample-4.component.html deleted file mode 100644 index 2e01c1e1b..000000000 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.html +++ /dev/null @@ -1,131 +0,0 @@ -
-
- - -

{{ cards[1].title }}

-
{{ cards[1].subtitle }}
- - - -
-
- - {{ cards[1].content}} - {{ cards[1].unit}} - - -
- -
- -
-
- - {{details[0].value}} - {{details[0].label}} -
-
- - {{details[1].value}} - {{details[1].label}} -
-
- -
- -
- 08:00 - 12:00 - 16:00 - 20:00 - 00:00 -
-
- - - - - - @for (day of days; track day) { - -
- {{ day.day }} - - {{day.icon}} - - - {{ day.tempHeight}} / {{day.tempLow}} - -
- - } - - - - - - - - - - -
- -
- - - - - - -

{{ cards[0].title }}

-
{{ cards[0].subtitle }}
- - - -

{{ cards[0].content}}

- - - - Tonight's availability - -
- @for (chip of cards[0].chips; track chip) { - - {{ chip }} - - } -
- - - - @for (button of cards[0].buttons; track button) { - - } - - -
- -
- - - -

Frank Carter

-
Photographer
- - - - - - - -

Photographer Frank Carter won this year national photo contest with his image "Skies" which gathered the most votes in the competition.

- - - - - - - -
-
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.scss b/src/app/layouts/card/card-sample-4/card-sample-4.component.scss deleted file mode 100644 index 88f16c2a8..000000000 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.scss +++ /dev/null @@ -1,163 +0,0 @@ -.card-wrapper { - max-width: 400px; - min-width: 250px; -} - -.chip-holder { - display: flex; - margin-bottom: 10px -} - -.chip-label { - display: block; - margin-bottom: 10px; -} - -.chip-holder .igx-chip { - flex: 1 0 0%; - margin-left: 10px; -} - -.chip-holder .igx-chip:first-of-type { - margin-left: 0; -} - -.content-divider { - margin-top: 20px !important; - margin-bottom: 20px !important; -} - -.weather-time { - display: flex; -} - -.weather-time span { - flex: 1 0 0%; - text-align: center; - position: relative; -} - -.time-wrapper { - padding: 15px 0 5px; -} - -.time-wrapper span::before, -.time-wrapper span::after { - content: ''; - position: absolute; - width: 1px; - background: #444; -} - -.time-wrapper span::before { - height: 5px; - bottom: calc(100% + 18px); - left: 0; -} - -.time-wrapper span::after { - height: 10px; - bottom: calc(100% + 13px); - left: calc(50% - .5px); -} - -.time-wrapper span:first-of-type::before { - display: none; -} - -.weather img { - height: 100%; - width: auto; - margin-right: 5px; -} - -.weather, -.weather-now, -.big-number { - height: 80px; - min-height: 80px; - display: flex; - align-content: center; - justify-content: space-between; -} - -.big-number { - line-height: 70px; - position: relative; - font-size: 90px; -} - -.weather-now { - margin-right: 20px; - padding-right: 30px; -} - -.temp-unit { - font-size: 20px; - position: absolute; - top: 0; - line-height: normal; - right: -25px; -} - -.item-container { - display: flex; - align-items: center; -} - -.day { - flex: 1 0 0%; -} - -.degree { - margin-left: 30px; -} - -.sample-wrapper--cards .igx-list { - width: 100%; - height: 0; - transition: all 250ms ease-in-out; -} - -.sample-wrapper--cards .igx-list.show { - width: 100%; - height: 290px; -} - -.w_details__label { - margin-left: 5px; -} - -.w_icon { - color: #666; - display: flex; - align-items: center; - justify-content: center; -} - -.w_details { - display: flex; - align-items: center; - justify-content: space-between; -} - -.weather { - margin-bottom: 15px; -} - -.w_details__item { - display: flex; - align-items: center; -} - -.w_details__icon { - margin-right: 10px; -} - -.isSunny { - color: #fad024; -} - -.item-container { - width: 100%; -} diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts deleted file mode 100644 index c2651ac13..000000000 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { Component, OnInit, ViewChild, inject } from '@angular/core'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxSliderComponent } from 'igniteui-angular/slider'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxButtonDirective, IgxDividerComponent, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxPrefixDirective } from 'igniteui-angular/input-group'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxChipComponent } from 'igniteui-angular/chips'; - -import { - Card, - IWeatherDetails, - IWeatherList, - weatherDetailsFactory, - weatherListFactory -} from '../card.blueprint'; - - -@Component({ - selector: 'app-card-sample-4', - styleUrls: ['./card-sample-4.component.scss'], - templateUrl: './card-sample-4.component.html', - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerComponent, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] -}) -export class CardSample4Component implements OnInit { - private iconService = inject(IgxIconService); - - @ViewChild(IgxExpansionPanelComponent, { static: true }) - public panel: IgxExpansionPanelComponent; - - public cards: Card[]; - public details: IWeatherDetails[]; - public days: IWeatherList[]; - - constructor() { - this.iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons'); - this.iconService.addSvgIcon('breeze', 'assets/images/card/icons/breeze.svg', 'weather-icons'); - } - - public toggleDetails() { - this.panel.toggle(); - } - - public ngOnInit() { - this.cards = [ - new Card({ - buttons: ['RESERVE'], - chips: ['5:30', '7:30', '8:00', '9:00'], - content: `Small plates, salads & sandwiches setting with 12 indoor seats plus patio seating.`, - imageUrl: 'assets/images/card/media/cafe.jpg', - subtitle: '$ - Italian, Cafe', - title: 'Café Badilico' - }), - new Card({ - buttons: ['Details'], - content: '37', - imageUrl: 'assets/images/card/media/weather.png', - subtitle: 'Mon 12:30 PM, Mostly sunny', - title: 'Sofia - Bulgaria', - unit: '°C' - }) - ]; - - this.details = [ - weatherDetailsFactory({ - icon: 'rain', - label: 'Participation', - value: '12%' - }), - weatherDetailsFactory({ - icon: 'breeze', - label: 'Wind', - value: '23 km/h' - }) - ]; - - this.days = [ - weatherListFactory({ - day: 'Tuesday', - icon: 'wb_cloudy', - tempHeight: '18°', - tempLow: '11°' - }), - weatherListFactory({ - day: 'Wednesday', - icon: 'wb_cloudy', - tempHeight: '16°', - tempLow: '10°' - }), - weatherListFactory({ - day: 'Thursday', - icon: 'wb_sunny', - isSunny: 'true', - tempHeight: '22°', - tempLow: '12°' - }), - weatherListFactory({ - day: 'Friday', - icon: 'wb_cloudy', - tempHeight: '28°', - tempLow: '17°' - }), - weatherListFactory({ - day: 'Saturday', - icon: 'wb_cloudy', - tempHeight: '21°', - tempLow: '16°' - }), - weatherListFactory({ - day: 'Sunday', - icon: 'wb_sunny', - isSunny: 'true', - tempHeight: '29°', - tempLow: '20°' - }) - ]; - } -} diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html deleted file mode 100644 index 98dee27aa..000000000 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html +++ /dev/null @@ -1,32 +0,0 @@ -
- - - - -
- - -
-
{{ card.title }}
-

{{ card.subtitle }}

-
- - - #artic - #fox - #card - - - - @for (icon of card.icons; track icon; let i = $index) { - - @if (i < 2) { - - } - } - -
- -
\ No newline at end of file diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss deleted file mode 100644 index 63707d63b..000000000 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss +++ /dev/null @@ -1,76 +0,0 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -// CSS variables approach - -igx-card { - --border-radius: #{rem(8px)}; - --outline-color: #f0f0f0; - --resting-shadow: none; - --hover-shadow: none; - --header-text-color: rgba(0, 0, 0, 0.88); -} - -igx-avatar { - --background: transparent; - --size: #{rem(30px)}; -} - -igx-chip { - --border-radius: #{rem(4px)}; - --background: #fafafa; - --border-color: #d9d9d9; - --hover-background: #d9d9d9; - --focus-background: #d9d9d9; -} - -.igx-icon-button--flat { - --foreground: #00000073; - --hover-foreground: #1677ff; - --hover-background: none; -} - -igx-divider { - --color: #f0f0f0 -} - -// Sass theme approach - -// $custom-card-theme: card-theme( -// $border-radius: rem(8px), -// $outline-color: #f0f0f0, -// $resting-shadow: none, -// $hover-shadow: none, -// $header-text-color: #000000e0, -// ); - -// $custom-avatar-theme: avatar-theme( -// $background: transparent, -// $size: rem(30px) -// ); - -// $custom-chip-theme: chip-theme( -// $border-radius: rem(4px), -// $background: #fafafa, -// $border-color: #d9d9d9, -// $hover-background: #d9d9d9, -// $focus-background: #d9d9d9, -// ); - -// $custom-icon-button-theme: flat-icon-button-theme( -// $foreground: #00000073, -// $hover-foreground: #1677ff, -// $hover-background: none, -// ); - -// $custom-divider-theme: divider-theme( -// $color: #f0f0f0 -// ); - -// :host { -// @include tokens($custom-card-theme); -// @include tokens($custom-avatar-theme); -// @include tokens($custom-chip-theme); -// @include tokens($custom-divider-theme); -// @include tokens($custom-icon-button-theme); -// } diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts deleted file mode 100644 index 36edbf29c..000000000 --- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, inject, OnInit } from '@angular/core'; -import { Card } from '../card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerModule, IgxIconButtonDirective } from 'igniteui-angular/directives'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxChipComponent } from 'igniteui-angular/chips'; - -@Component({ - selector: 'app-card-styling-sample', - templateUrl: './card-styling-sample.component.html', - styleUrls: ['./card-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, - IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, - IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, - IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] -}) -export class CardStylingSampleComponent implements OnInit { - private iconService = inject(IgxIconService) - public ngOnInit() { - this.iconService.addSvgIconFromText('settings-custom', '') - this.iconService.addSvgIconFromText('edit-custom', ''); - this.iconService.addSvgIconFromText('dots', ''); - }; - public card = new Card({ - icons: ['settings-custom', 'edit-custom', 'dots'], - subtitle: 'This is the description', - title: 'Card title' - }); -} diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss deleted file mode 100644 index 62ecb89d1..000000000 --- a/src/app/layouts/card/card-styling-sample/layout.scss +++ /dev/null @@ -1,79 +0,0 @@ -@use "igniteui-angular/theming" as *; - -:host { - ::ng-deep { - .igx-chip__item { - padding: 0 rem(5px); - height: rem(22px); - } - } -} - -.igx-card { - --ig-font-family: 'alibaba-sans', sans-serif; - - width: rem(300px); - border: none; -} - -.border { - border: rem(1px) solid var(--outline-color); - border-bottom-right-radius: rem(8px); - border-bottom-left-radius: rem(8px); - border-top: none; -} - -.igx-card-header{ - --ig-h6-font-size: 1rem; - --ig-body-1-font-size: #{rem(14px)}; - - width: unset; - padding: unset; - align-items: baseline; - margin: rem(24px) rem(24px) 0 rem(24px); - height: rem(65px); -} - -.igx-card-header__subtitle { - --ig-subtitle-2-font-weight: 400; - --ig-subtitle-2-line-height: #{rem(22px)}; - --ig-subtitle-2-letter-spacing: #{rem(0.5px)}; - --subtitle-text-color: rgba(0, 0, 0, 0.45); - - margin: rem(8px) 0 rem(12px); -} - -.igx-card-content { - padding: 0; - - igx-chip { - --ig-body-2-font-size: #{rem(12px)}; - - padding: rem(5px); - - &:nth-of-type(1) { - margin-left: rem(5px); - } - } - - igx-divider { - margin-top: rem(5px); - } -} - -igx-icon { - --ig-icon-size: #{rem(14px)}; -} - -igx-avatar { - border-radius: rem(20px); -} - -igx-card-actions { - justify-content: space-evenly; - padding: rem(6px) 0; - - igx-divider { - height: rem(24px); - } -} diff --git a/src/app/layouts/card/card-styling/card-styling.component.html b/src/app/layouts/card/card-styling/card-styling.component.html new file mode 100644 index 000000000..690188ed5 --- /dev/null +++ b/src/app/layouts/card/card-styling/card-styling.component.html @@ -0,0 +1,37 @@ + + + trending_up + +12.4% + + + Total balance + + + $24,860 + + +
+ + +
+ + + + + Support + + Support agent reviewing system dashboards on a laptop + + + Review the issue and check system logs + + + Find out more + + diff --git a/src/app/layouts/card/card-styling/card-styling.component.scss b/src/app/layouts/card/card-styling/card-styling.component.scss new file mode 100644 index 000000000..6829674a7 --- /dev/null +++ b/src/app/layouts/card/card-styling/card-styling.component.scss @@ -0,0 +1,173 @@ +@use "igniteui-theming/sass/typography" as *; +@import url("https://use.typekit.net/bng2zgw.css"); + +// The design brings its own palette and typeface, so the colors below are +// literal instead of theme tokens - the sample keeps its look in every theme. +// aktiv-grotesk is the typekit family name loaded above. +app-card-styling { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 100vh; + gap: rem(60px); + padding: rem(40px) rem(24px); + + .balance-card { + --ig-card-border-radius: #{rem(16px)}; + --ig-card-outline-color: #99c9ff; + + position: relative; + width: rem(312px); + padding: rem(8px); + background: #e6f2ff; + + igx-card-header { + padding: rem(16px) rem(16px) 0; + } + + [igxCardHeaderTitle] { + color: #004699; + font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif; + font-size: rem(14px); + font-weight: 500; + line-height: rem(24px); + letter-spacing: rem(0.1px); + } + + igx-card-content { + padding: 0 rem(16px); + overflow: visible; + } + + igx-card-actions { + padding: rem(16px); + } + } + + .trend-chip { + position: absolute; + inset-block-start: rem(24px); + inset-inline-end: rem(24px); + z-index: 1; + + .igx-chip__item { + box-sizing: border-box; + height: rem(24px); + padding: rem(2px) rem(6px); + border: none; + border-radius: rem(16px); + background: #cce4ff; + color: #004699; + font-family: "Titillium Web", Verdana, Tahoma, sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); + } + + .igx-chip__start { + color: #004699; + } + + igx-icon { + --ig-icon-size: #{rem(20px)}; + } + } + + .balance-amount { + display: block; + color: #0176ff; + font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif; + font-size: rem(32px); + font-weight: 600; + line-height: rem(40px); + letter-spacing: 0; + } + + .balance-actions { + display: inline-flex; + gap: rem(8px); + + [igxIconButton] { + --ig-flat-icon-button-foreground: #004699; + + width: rem(36px); + height: rem(36px); + border-radius: 50%; + background: #ffffff; + } + } + + .support-card { + --ig-card-border-radius: #{rem(16px)}; + --ig-card-outline-color: #e5ebf3; + + position: relative; + width: rem(246px); + padding: rem(8px); + background: #ffffff; + + igx-card-header { + padding: rem(16px) rem(16px) 0; + } + + [igxCardHeaderTitle] { + margin-block-end: 0; + color: #004699; + font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif; + font-size: rem(16px); + font-weight: 700; + line-height: rem(20px); + letter-spacing: 0; + } + + igx-card-actions { + padding: rem(16px) rem(16px) rem(8px); + } + } + + .support-media { + box-sizing: border-box; + padding: rem(16px); + border-radius: rem(16px); + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + + .support-tag { + position: absolute; + inset-block-start: rem(12px); + inset-inline-start: rem(16px); + z-index: 1; + + .igx-chip__item { + box-sizing: border-box; + height: rem(24px); + padding: rem(2px) rem(10px); + border: none; + border-radius: rem(16px); + background: #e6f2ff; + color: #004699; + font-family: "Titillium Web", Verdana, Tahoma, sans-serif; + font-size: rem(14px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.25px); + } + } + + .support-link { + color: #7d91ab; + font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif; + font-size: rem(12px); + font-weight: 600; + line-height: rem(16px); + letter-spacing: rem(0.15px); + } +} diff --git a/src/app/layouts/card/card-styling/card-styling.component.ts b/src/app/layouts/card/card-styling/card-styling.component.ts new file mode 100644 index 000000000..f999654a8 --- /dev/null +++ b/src/app/layouts/card/card-styling/card-styling.component.ts @@ -0,0 +1,34 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective +} from 'igniteui-angular/card'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-card-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./card-styling.component.scss'], + templateUrl: './card-styling.component.html', + imports: [ + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxChipComponent, + IgxIconButtonDirective, + IgxIconComponent, + IgxPrefixDirective, + IgxSuffixDirective + ] +}) +export class CardStylingComponent { } diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html deleted file mode 100644 index 171c4de3d..000000000 --- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html +++ /dev/null @@ -1,28 +0,0 @@ -
- - - - - - -

{{ card.title }}

-
{{ card.subtitle }}
- - - -

{{ card.content }}

- - - - @for (icon of card.icons; track icon) { - - } - - - -
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss deleted file mode 100644 index a60d456fa..000000000 --- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss +++ /dev/null @@ -1 +0,0 @@ -@use "layout.scss"; diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts deleted file mode 100644 index 59c146a84..000000000 --- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component } from '@angular/core'; -import { Card } from '../card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxSuffixDirective } from 'igniteui-angular/input-group'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-card-tailwind-styling-sample', - templateUrl: './card-tailwind-styling-sample.component.html', - styleUrls: ['./card-tailwind-styling-sample.component.scss'], - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] -}) -export class CardTailwindStylingSampleComponent { - public card = new Card({ - content: `Hi! I'm Jane, photographer and filmmaker. - Photography is a way of feeling, of touching, - of loving. What you have caught on film is captured forever... - it remembers little things, long after you have - forgotten everything.`, - icons: ['person', 'favorite', 'share'], - imageUrl: 'https://images.unsplash.com/' - + 'photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80', - subtitle: 'Professional Photographer', - title: 'Jane Doe' - }); -} diff --git a/src/app/layouts/card/card-tailwind-styling-sample/layout.scss b/src/app/layouts/card/card-tailwind-styling-sample/layout.scss deleted file mode 100644 index d8f5f95f8..000000000 --- a/src/app/layouts/card/card-tailwind-styling-sample/layout.scss +++ /dev/null @@ -1,4 +0,0 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} \ No newline at end of file diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html new file mode 100644 index 000000000..d4fff12c1 --- /dev/null +++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html @@ -0,0 +1,105 @@ + + + Cafe interior + + + + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

+ + + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + + } + } +
+ + + +
+ + + +
+ + + + + + + + + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

+ + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + + } + } +
+ + + +
+ + + +
+ + + diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss new file mode 100644 index 000000000..ea7083981 --- /dev/null +++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss @@ -0,0 +1,36 @@ +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-template-columns: repeat(auto-fit, rem(344px)); + gap: rem(40px); + place-content: center; + height: 100vh; +} + +igx-card:nth-of-type(2) { + align-self: center; +} + +.card-sample-custom-subtitle { + display: block; + color: var(--ig-gray-700); + + @include type-style("body-2") { + margin-block-start: rem(8px); + }; +} + +.stats-title { + color: var(--ig-gray-900); + + @include type-style("subtitle-1") { + font-weight: 600; + }; +} + +.stats-subtitle { + color: var(--ig-gray-500); + + @include type-style("body-2"); +} diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts new file mode 100644 index 000000000..79d556629 --- /dev/null +++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts @@ -0,0 +1,51 @@ +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective +} from 'igniteui-angular/card'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { berealIcon, instagramIcon, plusIcon, threadsIcon } from './icons'; + +@Component({ + selector: 'app-card-tailwind-styling', + styleUrls: ['./card-tailwind-styling.component.scss'], + templateUrl: './card-tailwind-styling.component.html', + imports: [ + IgxAvatarComponent, + IgxButtonDirective, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective, + IgxDividerComponent, + IgxIconButtonDirective, + IgxIconComponent, + IgxRippleDirective + ] +}) +export class CardTailwindStylingComponent { + private iconService = inject(IgxIconService); + + public profileStats = [ + { value: '23.9K', label: 'Likes' }, + { value: '163', label: 'Posts' }, + { value: '23.9K', label: 'Views' } + ]; + + constructor() { + this.iconService.addSvgIconFromText('instagram', instagramIcon, 'material'); + this.iconService.addSvgIconFromText('bereal', berealIcon, 'material'); + this.iconService.addSvgIconFromText('threads', threadsIcon, 'material'); + this.iconService.addSvgIconFromText('plus', plusIcon, 'material'); + } +} diff --git a/src/app/layouts/card/card-tailwind-styling/icons.ts b/src/app/layouts/card/card-tailwind-styling/icons.ts new file mode 100644 index 000000000..70599bae5 --- /dev/null +++ b/src/app/layouts/card/card-tailwind-styling/icons.ts @@ -0,0 +1,11 @@ +export const instagramIcon = + ''; + +export const berealIcon = + ''; + +export const threadsIcon = + ''; + +export const plusIcon = + ''; diff --git a/src/app/layouts/card/card.blueprint.ts b/src/app/layouts/card/card.blueprint.ts deleted file mode 100644 index 2fcb93246..000000000 --- a/src/app/layouts/card/card.blueprint.ts +++ /dev/null @@ -1,68 +0,0 @@ -interface ICard { - title?: string; - subtitle?: string; - content?: string; - imageUrl?: string; - avatarUrl?: string; - buttons?: string[]; - icons?: string[]; - chips?: string[]; - unit?: string; -} - -export interface IWeatherList { - isSunny: boolean; - day: string; - icon: string; - tempHeight: string; - tempLow: string; -} - -export interface IWeatherDetails { - value: string; - icon: string; - label: string; -} - -export class Card { - public title: string; - public subtitle: string; - public content: string; - public imageUrl: string; - public avatarUrl: string; - public buttons: string[]; - public icons: string[]; - public chips: string[]; - public unit: string; - - constructor(obj?: ICard) { - this.title = obj.title || 'Card Title'; - this.subtitle = obj.subtitle || 'Card Subtitle'; - this.content = obj.content || - 'Some card content should be placed here. Description or other related information.'; - this.imageUrl = obj.imageUrl || 'assets/images/card/media/placeholder.jpg'; - this.avatarUrl = obj.avatarUrl || 'assets/images/card/avatars/rupert_stadler.jpg'; - this.buttons = obj.buttons || ['ACTION1', 'ACTION2']; - this.icons = obj.icons || ['favorite', 'bookmark', 'share']; - this.chips = obj.chips || []; - this.unit = obj.unit || undefined; - } -} - -export function weatherListFactory(params?: any): IWeatherList { - return { - day: params.day || 'day of the week', - icon: params.icon || 'wb_cloudy', - isSunny: params.isSunny || '', - tempHeight: params.tempHeight || '°C', - tempLow: params.tempLow || '°C' - }; -} - -export function weatherDetailsFactory(params?: any): IWeatherDetails { - return { - icon: params.icon || '', - label: params.label || '', - value: params.value || '' - }; -} diff --git a/src/app/layouts/card/card.component.html b/src/app/layouts/card/card.component.html deleted file mode 100644 index d8ea086ab..000000000 --- a/src/app/layouts/card/card.component.html +++ /dev/null @@ -1,31 +0,0 @@ -
- - - - - - -

{{ card.title }}

-
{{ card.subtitle }}
- - - -

{{ card.content }}

- - - - @for (button of card.buttons; track button) { - - } - @for (icon of card.icons; track icon) { - - } - - - -
diff --git a/src/app/layouts/card/card.component.scss b/src/app/layouts/card/card.component.scss deleted file mode 100644 index 457aa673e..000000000 --- a/src/app/layouts/card/card.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.card-wrapper { - max-width: 320px; - min-width: 220px; -} diff --git a/src/app/layouts/card/card.component.spec.ts b/src/app/layouts/card/card.component.spec.ts deleted file mode 100644 index 0afc77905..000000000 --- a/src/app/layouts/card/card.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; - -import { CardComponent } from './card.component'; - -describe('CardComponent', () => { - let component: CardComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [CardComponent] -}) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/layouts/card/card.component.ts b/src/app/layouts/card/card.component.ts deleted file mode 100644 index d6eb77715..000000000 --- a/src/app/layouts/card/card.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component } from '@angular/core'; -import { Card } from './card.blueprint'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-card', - styleUrls: ['./card.component.scss'], - templateUrl: './card.component.html', - imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] -}) -export class CardComponent { - public card = new Card({ - buttons: ['read more'], - content: `New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. At its core is Manhattan, - a densely populated borough that's among the world's major commercial, - financial and cultural centers.`, - icons: ['favorite', 'share'], - imageUrl: 'assets/images/card/media/ny.jpg', - subtitle: 'City in New York', - title: 'New York City' - }); -} diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index 1b3a1d86d..da3c8941e 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -80,13 +80,12 @@ export const layoutsRoutesData = { 'tabs-tailwind-style': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' }, 'tabs-alignment': { displayName: 'Tabs Alignment', parentName: 'Tabs' }, 'tabs-header-prefix-suffix': { displayName: 'Tabs Prefix/Suffix', parentName: 'Tabs' }, - 'card-sample-0': { displayName: 'Elevated Card', parentName: 'Card' }, - 'card-sample-1': { displayName: 'Outlined Card', parentName: 'Card' }, - 'card-sample-2': { displayName: 'Horizontal Card', parentName: 'Card' }, - 'card-sample-3': { displayName: 'Horizontal Card Alt', parentName: 'Card' }, - 'card-sample-4': { displayName: 'Other Examples', parentName: 'Card' }, - 'card-styling-sample': { displayName: 'Styled Card', parentName: 'Card' }, - 'card-tailwind-styling-sample': { displayName: 'Tailwind Styled Card', parentName: 'Card' }, + 'card-overview': { displayName: 'Overview', parentName: 'Card' }, + 'card-actions': { displayName: 'Card Actions', parentName: 'Card' }, + 'card-media': { displayName: 'Card Media', parentName: 'Card' }, + 'card-position': { displayName: 'Card Media Position', parentName: 'Card' }, + 'card-styling': { displayName: 'Card Styling', parentName: 'Card' }, + 'card-tailwind-styling': { displayName: 'Card Tailwind Styling', parentName: 'Card' }, 'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' }, 'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' }, 'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index 576d5a7c9..76875dc81 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -15,13 +15,12 @@ import { BreadcrumbsTailwindStylingComponent } from './breadcrumbs/breadcrumbs-t import { BreadcrumbsWrappingComponent } from './breadcrumbs/breadcrumbs-wrapping/breadcrumbs-wrapping.component'; import { BreadcrumbsSizesComponent } from './breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component'; import { BreadcrumbsStatesComponent } from './breadcrumbs/breadcrumbs-states/breadcrumbs-states.component'; -import { CardSample1Component } from './card/card-sample-1/card-sample-1.component'; -import { CardSample2Component } from './card/card-sample-2/card-sample-2.component'; -import { CardSample3Component } from './card/card-sample-3/card-sample-3.component'; -import { CardSample4Component } from './card/card-sample-4/card-sample-4.component'; -import { CardStylingSampleComponent } from './card/card-styling-sample/card-styling-sample.component'; -import { CardTailwindStylingSampleComponent } from './card/card-tailwind-styling-sample/card-tailwind-styling-sample.component'; -import { CardComponent } from './card/card.component'; +import { CardActionsComponent } from './card/card-actions/card-actions.component'; +import { CardMediaComponent } from './card/card-media/card-media.component'; +import { CardOverviewComponent } from './card/card-overview/card-overview.component'; +import { CardPositionComponent } from './card/card-position/card-position.component'; +import { CardStylingComponent } from './card/card-styling/card-styling.component'; +import { CardTailwindStylingComponent } from './card/card-tailwind-styling/card-tailwind-styling.component'; import { CarouselAnimationsSampleComponent } from './carousel/carousel-animations-sample/carousel-animations-sample.component'; @@ -548,39 +547,34 @@ export const LayoutsRoutes: Routes = [ path: 'tabs-header-prefix-suffix' }, { - component: CardComponent, - data: layoutsRoutesData['card-sample-0'], - path: 'card-sample-0' + component: CardOverviewComponent, + data: layoutsRoutesData['card-overview'], + path: 'card-overview' }, { - component: CardSample1Component, - data: layoutsRoutesData['card-sample-1'], - path: 'card-sample-1' + component: CardActionsComponent, + data: layoutsRoutesData['card-actions'], + path: 'card-actions' }, { - component: CardSample2Component, - data: layoutsRoutesData['card-sample-2'], - path: 'card-sample-2' + component: CardMediaComponent, + data: layoutsRoutesData['card-media'], + path: 'card-media' }, { - component: CardSample3Component, - data: layoutsRoutesData['card-sample-3'], - path: 'card-sample-3' + component: CardPositionComponent, + data: layoutsRoutesData['card-position'], + path: 'card-position' }, { - component: CardSample4Component, - data: layoutsRoutesData['card-sample-4'], - path: 'card-sample-4' + component: CardStylingComponent, + data: layoutsRoutesData['card-styling'], + path: 'card-styling' }, { - component: CardStylingSampleComponent, - data: layoutsRoutesData['card-styling-sample'], - path: 'card-styling-sample' - }, - { - component: CardTailwindStylingSampleComponent, - data: layoutsRoutesData['card-tailwind-styling-sample'], - path: 'card-tailwind-styling-sample' + component: CardTailwindStylingComponent, + data: layoutsRoutesData['card-tailwind-styling'], + path: 'card-tailwind-styling' }, { component: TileManagerComponent, From 293e8b4cb270476e0d9b66fbb256115d1e23501e Mon Sep 17 00:00:00 2001 From: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> Date: Fri, 23 Oct 2026 09:14:59 +0300 Subject: [PATCH 4/6] feat(chip): update samples for new docs (#4050) --- 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 | 17 +++ .../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 | 12 ++ .../chip-layout/chip-layout.component.html | 26 ++++ .../chip-layout/chip-layout.component.scss | 29 ++++ .../chip/chip-layout/chip-layout.component.ts | 14 ++ .../chip-outlined.component.html | 19 +-- .../chip-outlined.component.scss | 28 +++- .../chip-outlined/chip-outlined.component.ts | 17 +-- .../chip-overview.component.html | 33 +++++ .../chip-overview.component.scss | 55 ++++++++ .../chip-overview/chip-overview.component.ts | 49 +++++++ .../chip-remove/chip-remove.component.html | 7 + .../chip-remove/chip-remove.component.scss | 21 +++ .../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 | 14 ++ .../chip-styling/chip-styling.component.html | 22 +-- .../chip-styling/chip-styling.component.scss | 100 +++++++------ .../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 | 12 ++ .../data-display/data-display-routes-data.ts | 10 +- src/app/data-display/data-display.routes.ts | 52 +++++-- 46 files changed, 889 insertions(+), 502 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 4628a0020..01a74871d 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 153b01495..5474c237f 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 8cb74d307..000000000 --- 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 8c1bf8489..000000000 --- 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 6f3cf48dd..000000000 --- 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 000000000..d2a6b5729 --- /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 000000000..feffc7fa5 --- /dev/null +++ b/src/app/data-display/chip/chip-area/chip-area.component.scss @@ -0,0 +1,17 @@ +: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; + // The chips area takes the full width and packs its chips to the start. + justify-content: center; + 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 000000000..c8eed4d27 --- /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 000000000..3546d1d3e --- /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 000000000..7002e9959 --- /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 000000000..de7f2fe67 --- /dev/null +++ b/src/app/data-display/chip/chip-interaction-state/chip-interaction-state.component.ts @@ -0,0 +1,12 @@ +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'], + // 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.html b/src/app/data-display/chip/chip-layout/chip-layout.component.html new file mode 100644 index 000000000..79899b3cd --- /dev/null +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.html @@ -0,0 +1,26 @@ +
+ Text + Chip +
+
+ Prefix + + + Chip + +
+
+ Prefix+Suffix + + + Chip + + +
+
+ Suffix + + Chip + + +
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 000000000..0d412509f --- /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 000000000..3c7db6128 --- /dev/null +++ b/src/app/data-display/chip/chip-layout/chip-layout.component.ts @@ -0,0 +1,14 @@ +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'], + // 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-outlined/chip-outlined.component.html b/src/app/data-display/chip/chip-outlined/chip-outlined.component.html index c9d6b7529..3ea695e1b 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 a17f5cbe5..ac4f563ad 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 3cbf555bd..ae4d44024 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(); - } } 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 000000000..ad5dfe386 --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.html @@ -0,0 +1,33 @@ +
+
+ Name + + + +
+
+ Skills · {{ selected.length }} selected +
+ @for (skill of skills; track skill) { + + {{ 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 new file mode 100644 index 000000000..c79850ce9 --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.scss @@ -0,0 +1,55 @@ +: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); +} + +/* 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; +} + +.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 000000000..85a21e61a --- /dev/null +++ b/src/app/data-display/chip/chip-overview/chip-overview.component.ts @@ -0,0 +1,49 @@ +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'; + +@Component({ + selector: 'app-chip-overview', + templateUrl: './chip-overview.component.html', + styleUrls: ['./chip-overview.component.scss'], + 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 = ['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 }); + } +} 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 000000000..c96c4ec05 --- /dev/null +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.html @@ -0,0 +1,7 @@ +
+ @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 000000000..b7e26c0c1 --- /dev/null +++ b/src/app/data-display/chip/chip-remove/chip-remove.component.scss @@ -0,0 +1,21 @@ +:host { + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +/* 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); +} 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 000000000..a47f988db --- /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 47ce50e55..000000000 --- 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 5e88f1179..000000000 --- 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 3d5d9d629..000000000 --- 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 000000000..8c7ca51dd --- /dev/null +++ b/src/app/data-display/chip/chip-size/chip-size.component.html @@ -0,0 +1,24 @@ +
+ Small + + + Chip + + +
+
+ Medium + + + Chip + + +
+
+ Large + + + Chip + + +
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 000000000..f5a91c586 --- /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 000000000..cb49dfd31 --- /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 000000000..1fadcd384 --- /dev/null +++ b/src/app/data-display/chip/chip-state/chip-state.component.html @@ -0,0 +1,28 @@ +
+ Idle + + + Chip + +
+
+ Hover + + + Chip + +
+
+ Focused + + + Chip + +
+
+ Selected + + + 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 000000000..1c6c5ee20 --- /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 000000000..a4153b8f1 --- /dev/null +++ b/src/app/data-display/chip/chip-state/chip-state.component.ts @@ -0,0 +1,14 @@ +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'], + // 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-styling/chip-styling.component.html b/src/app/data-display/chip/chip-styling/chip-styling.component.html index 7d388ed33..c86fb77fe 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 9f9b4b01b..8a7827033 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,66 @@ -@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 +// The design's blue-gray and orange are not in the theme palette, so these two +// chips take the design's own colors and darken them for hover and focus. +.product-chip { + --ig-chip-outlined-background: var(--ig-surface-500); + --ig-chip-outlined-text-color: #556c86; + --ig-chip-border-color: #556c86; + --ig-chip-hover-outlined-text-color: color-mix(in srgb, #556c86, black 20%); + --ig-chip-hover-border-color: color-mix(in srgb, #556c86, black 20%); + --ig-chip-focus-outlined-text-color: color-mix(in srgb, #556c86, black 40%); + --ig-chip-focus-border-color: color-mix(in srgb, #556c86, black 40%); +} - &.linkedin { - --background: #55acee; - --hover-background: #55acee; - --focus-background: #4682af; - } +.contact-chip { + --ig-chip-outlined-background: #ffe1d6; + --ig-chip-outlined-text-color: black; + --ig-chip-border-color: #f95924; + --ig-chip-hover-outlined-background: color-mix(in srgb, #ffe1d6, #f95924 25%); + --ig-chip-hover-outlined-text-color: black; + --ig-chip-hover-border-color: #f95924; + --ig-chip-focus-outlined-background: color-mix(in srgb, #ffe1d6, #f95924 50%); + --ig-chip-focus-outlined-text-color: black; + --ig-chip-focus-border-color: #f95924; } -//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: #933313; +} 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 f3ac4516d..85d700924 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 f5afb9a67..000000000 --- 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 9e7d4e2a7..7330dff6d 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 a60d456fa..ea00a0cfa 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 7a5fc1a13..9e323ec85 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 000000000..7e7f54464 --- /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 a201d613a..000000000 --- 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 000000000..986c94459 --- /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 000000000..3696a98b4 --- /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 000000000..725b3df50 --- /dev/null +++ b/src/app/data-display/chip/chip-types/chip-types.component.ts @@ -0,0 +1,12 @@ +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'], + // 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 { } diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 9d197973f..515f44a66 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 0c0584b65..41d01b771 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 1d812d8559d5ab292e31abe5507435304b91e19d Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Fri, 23 Oct 2026 14:25:14 +0300 Subject: [PATCH 5/6] feat(rating): update samples content (#4053) --- live-editing/configs/ButtonConfigGenerator.ts | 2 + .../configs/ButtonGroupConfigGenerator.ts | 2 + live-editing/configs/CardConfigGenerator.ts | 4 +- .../configs/CheckboxConfigGenerator.ts | 2 + live-editing/configs/RatingConfigGenerator.ts | 67 +++++++++++++++++++ live-editing/generators/ConfigGenerators.ts | 2 + .../data-entries/data-entries-routes-data.ts | 7 ++ src/app/data-entries/data-entries.routes.ts | 42 ++++++++++++ .../rating-interaction-states.component.html | 10 +++ .../rating-interaction-states.component.scss | 37 ++++++++++ .../rating-interaction-states.component.ts | 13 ++++ .../rating-layout.component.html | 10 +++ .../rating-layout.component.scss | 36 ++++++++++ .../rating-layout/rating-layout.component.ts | 13 ++++ .../rating-overview.component.html | 9 +++ .../rating-overview.component.scss | 21 ++++++ .../rating-overview.component.ts | 20 ++++++ .../rating-size/rating-size.component.html | 14 ++++ .../rating-size/rating-size.component.scss | 44 ++++++++++++ .../rating-size/rating-size.component.ts | 13 ++++ .../rating-states.component.html | 10 +++ .../rating-states.component.scss | 36 ++++++++++ .../rating-states/rating-states.component.ts | 13 ++++ .../rating-styling.component.html | 17 +++++ .../rating-styling.component.scss | 45 +++++++++++++ .../rating-styling.component.ts | 29 ++++++++ .../rating-tailwind-styling.component.html | 23 +++++++ .../rating-tailwind-styling.component.scss | 26 +++++++ .../rating-tailwind-styling.component.ts | 22 ++++++ src/app/services/theme.service.ts | 26 ++++++- 30 files changed, 613 insertions(+), 2 deletions(-) create mode 100644 live-editing/configs/RatingConfigGenerator.ts create mode 100644 src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html create mode 100644 src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss create mode 100644 src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts create mode 100644 src/app/data-entries/rating/rating-layout/rating-layout.component.html create mode 100644 src/app/data-entries/rating/rating-layout/rating-layout.component.scss create mode 100644 src/app/data-entries/rating/rating-layout/rating-layout.component.ts create mode 100644 src/app/data-entries/rating/rating-overview/rating-overview.component.html create mode 100644 src/app/data-entries/rating/rating-overview/rating-overview.component.scss create mode 100644 src/app/data-entries/rating/rating-overview/rating-overview.component.ts create mode 100644 src/app/data-entries/rating/rating-size/rating-size.component.html create mode 100644 src/app/data-entries/rating/rating-size/rating-size.component.scss create mode 100644 src/app/data-entries/rating/rating-size/rating-size.component.ts create mode 100644 src/app/data-entries/rating/rating-states/rating-states.component.html create mode 100644 src/app/data-entries/rating/rating-states/rating-states.component.scss create mode 100644 src/app/data-entries/rating/rating-states/rating-states.component.ts create mode 100644 src/app/data-entries/rating/rating-styling/rating-styling.component.html create mode 100644 src/app/data-entries/rating/rating-styling/rating-styling.component.scss create mode 100644 src/app/data-entries/rating/rating-styling/rating-styling.component.ts create mode 100644 src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html create mode 100644 src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss create mode 100644 src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts diff --git a/live-editing/configs/ButtonConfigGenerator.ts b/live-editing/configs/ButtonConfigGenerator.ts index 3ae3e22d3..d9af0969d 100644 --- a/live-editing/configs/ButtonConfigGenerator.ts +++ b/live-editing/configs/ButtonConfigGenerator.ts @@ -86,6 +86,8 @@ export class ButtonConfigGenerator implements IConfigGenerator { // button tailwind styling configs.push(new Config({ component: 'ButtonTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], + additionalFiles: [".postcssrc.json"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/button/" })); diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts index 64aeafcbc..5716e6ad5 100644 --- a/live-editing/configs/ButtonGroupConfigGenerator.ts +++ b/live-editing/configs/ButtonGroupConfigGenerator.ts @@ -76,6 +76,8 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator { // button group tailwind styling configs.push(new Config({ component: 'ButtonGroupTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], + additionalFiles: [".postcssrc.json"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/buttonGroup/" })); diff --git a/live-editing/configs/CardConfigGenerator.ts b/live-editing/configs/CardConfigGenerator.ts index 26ec0aa60..24ea65ce7 100644 --- a/live-editing/configs/CardConfigGenerator.ts +++ b/live-editing/configs/CardConfigGenerator.ts @@ -56,9 +56,11 @@ export class CardConfigGenerator implements IConfigGenerator { // card tailwind styling configs.push(new Config({ component: 'CardTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], appConfig: BaseAppConfig, additionalFiles: [ - "/src/app/layouts/card/card-tailwind-styling/icons.ts" + "/src/app/layouts/card/card-tailwind-styling/icons.ts", + ".postcssrc.json" ], shortenComponentPathBy: "/layouts/card/" })); diff --git a/live-editing/configs/CheckboxConfigGenerator.ts b/live-editing/configs/CheckboxConfigGenerator.ts index 54a993563..fadff6643 100644 --- a/live-editing/configs/CheckboxConfigGenerator.ts +++ b/live-editing/configs/CheckboxConfigGenerator.ts @@ -31,6 +31,8 @@ export class CheckboxConfigGenerator implements IConfigGenerator { // checkbox tailwind styling configs.push(new Config({ component: 'CheckboxTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], + additionalFiles: [".postcssrc.json"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); diff --git a/live-editing/configs/RatingConfigGenerator.ts b/live-editing/configs/RatingConfigGenerator.ts new file mode 100644 index 000000000..d8b7c2112 --- /dev/null +++ b/live-editing/configs/RatingConfigGenerator.ts @@ -0,0 +1,67 @@ +import { Config, IConfigGenerator } from 'igniteui-live-editing' +import { BaseAppConfig } from './BaseConfig'; +export class RatingConfigGenerator implements IConfigGenerator { + + public generateConfigs(): Config[] { + const configs = new Array(); + + // rating overview + configs.push(new Config({ + component: 'RatingOverviewComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating layout + configs.push(new Config({ + component: 'RatingLayoutComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating interaction states + configs.push(new Config({ + component: 'RatingInteractionStatesComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating states + configs.push(new Config({ + component: 'RatingStatesComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating size + configs.push(new Config({ + component: 'RatingSizeComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating styling + configs.push(new Config({ + component: 'RatingStylingComponent', + additionalDependencies: ['igniteui-webcomponents'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + // rating tailwind styling + configs.push(new Config({ + component: 'RatingTailwindStylingComponent', + additionalDependencies: ['igniteui-webcomponents', 'tailwindcss', '@tailwindcss/postcss'], + additionalFiles: ['.postcssrc.json'], + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/rating/" + })); + + return configs; + } +} diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts index 858d004a3..b615fa159 100644 --- a/live-editing/generators/ConfigGenerators.ts +++ b/live-editing/generators/ConfigGenerators.ts @@ -44,6 +44,7 @@ import { NavbarConfigGenerator } from '../configs/NavbarConfigGenerator'; import { NavdrawerConfigGenerator } from '../configs/NavDrawerConfigGenerator'; import { OverlayConfigGenerator } from '../configs/OverlayConfigGenerator'; import { RadioConfigGenerator } from '../configs/RadioConfigGenerator'; +import { RatingConfigGenerator } from '../configs/RatingConfigGenerator'; import { RippleConfigGenerator } from '../configs/RippleConfigGenerator'; import { SelectConfigGenerator } from '../configs/SelectConfigGenerator'; import { SliderConfigGenerator } from '../configs/SliderConfigGenerator'; @@ -115,6 +116,7 @@ export const CONFIG_GENERATORS = MaskConfigGenerator, MonthPickerConfigGenerator, RadioConfigGenerator, + RatingConfigGenerator, SelectConfigGenerator, SliderConfigGenerator, SwitchConfigGenerator, diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts index c60900ec6..1505eaa8f 100644 --- a/src/app/data-entries/data-entries-routes-data.ts +++ b/src/app/data-entries/data-entries-routes-data.ts @@ -78,6 +78,13 @@ export const dataEntriesRoutesData = { "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" }, "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" }, "rating-form": { displayName: "Rating in Form", parentName: "Rating" }, + "rating-overview": { displayName: "Rating Overview", parentName: "Rating" }, + "rating-layout": { displayName: "Rating Layout", parentName: "Rating" }, + "rating-interaction-states": { displayName: "Rating Interaction States", parentName: "Rating" }, + "rating-states": { displayName: "Rating States", parentName: "Rating" }, + "rating-size": { displayName: "Rating Size", parentName: "Rating" }, + "rating-styling": { displayName: "Rating Styling", parentName: "Rating" }, + "rating-tailwind-styling": { displayName: "Rating Tailwind Styling", parentName: "Rating" }, "switch-overview": { displayName: "Switch Overview", parentName: "Switch" }, "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" }, "switch-disabled": { displayName: "Disabled Switches", parentName: "Switch" }, diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts index 1219ec653..12b4d0558 100644 --- a/src/app/data-entries/data-entries.routes.ts +++ b/src/app/data-entries/data-entries.routes.ts @@ -85,6 +85,13 @@ import { SwitchLayoutComponent } from './switch/switch-layout/switch-layout.comp import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component'; import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component'; import { RatingInFormComponent } from './rating/rating-form/rating-form.component'; +import { RatingOverviewComponent } from './rating/rating-overview/rating-overview.component'; +import { RatingLayoutComponent } from './rating/rating-layout/rating-layout.component'; +import { RatingInteractionStatesComponent } from './rating/rating-interaction-states/rating-interaction-states.component'; +import { RatingStatesComponent } from './rating/rating-states/rating-states.component'; +import { RatingSizeComponent } from './rating/rating-size/rating-size.component'; +import { RatingStylingComponent } from './rating/rating-styling/rating-styling.component'; +import { RatingTailwindStylingComponent } from './rating/rating-tailwind-styling/rating-tailwind-styling.component'; import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component'; import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component'; import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component'; @@ -489,6 +496,41 @@ export const DataEntriesRoutes: Routes = [ data: dataEntriesRoutesData['rating-in-form'], path: 'rating-form' }, + { + component: RatingOverviewComponent, + data: dataEntriesRoutesData['rating-overview'], + path: 'rating-overview' + }, + { + component: RatingLayoutComponent, + data: dataEntriesRoutesData['rating-layout'], + path: 'rating-layout' + }, + { + component: RatingInteractionStatesComponent, + data: dataEntriesRoutesData['rating-interaction-states'], + path: 'rating-interaction-states' + }, + { + component: RatingStatesComponent, + data: dataEntriesRoutesData['rating-states'], + path: 'rating-states' + }, + { + component: RatingSizeComponent, + data: dataEntriesRoutesData['rating-size'], + path: 'rating-size' + }, + { + component: RatingStylingComponent, + data: dataEntriesRoutesData['rating-styling'], + path: 'rating-styling' + }, + { + component: RatingTailwindStylingComponent, + data: dataEntriesRoutesData['rating-tailwind-styling'], + path: 'rating-tailwind-styling' + }, { component: SwitchOverviewComponent, data: dataEntriesRoutesData['switch-overview'], diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html new file mode 100644 index 000000000..9cd71900b --- /dev/null +++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html @@ -0,0 +1,10 @@ +
+
+ Enabled + +
+
+ Disabled + +
+
diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss new file mode 100644 index 000000000..b9b8ed01f --- /dev/null +++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss @@ -0,0 +1,37 @@ +:host { + /* styles.scss asks the page for the large size; the ratings keep their own + default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: flex; + align-items: center; + gap: 3.75rem; +} + +.state { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.state-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} + +igc-rating { + --ig-rating-label-color: var(--ig-gray-700); + --ig-rating-disabled-label-color: var(--ig-gray-500); +} diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts new file mode 100644 index 000000000..1a353b80f --- /dev/null +++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts @@ -0,0 +1,13 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-interaction-states', + styleUrls: ['./rating-interaction-states.component.scss'], + templateUrl: './rating-interaction-states.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingInteractionStatesComponent { } diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.html b/src/app/data-entries/rating/rating-layout/rating-layout.component.html new file mode 100644 index 000000000..8563d85ab --- /dev/null +++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.html @@ -0,0 +1,10 @@ +
+
+ Label / On + +
+
+ Label / Off + +
+
diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.scss b/src/app/data-entries/rating/rating-layout/rating-layout.component.scss new file mode 100644 index 000000000..a74c7b1f8 --- /dev/null +++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.scss @@ -0,0 +1,36 @@ +:host { + /* styles.scss asks the page for the large size; the ratings keep their own + default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.layouts { + display: flex; + align-items: center; + gap: 3.75rem; +} + +.layout { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.layout-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} + +igc-rating { + --ig-rating-label-color: var(--ig-gray-700); +} diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.ts b/src/app/data-entries/rating/rating-layout/rating-layout.component.ts new file mode 100644 index 000000000..8ebbf93fc --- /dev/null +++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.ts @@ -0,0 +1,13 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-layout', + styleUrls: ['./rating-layout.component.scss'], + templateUrl: './rating-layout.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingLayoutComponent { } diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.html b/src/app/data-entries/rating/rating-overview/rating-overview.component.html new file mode 100644 index 000000000..5143ca37a --- /dev/null +++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.html @@ -0,0 +1,9 @@ + + + Rate this product + Your opinion matters to us! + + + + + diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.scss b/src/app/data-entries/rating/rating-overview/rating-overview.component.scss new file mode 100644 index 000000000..446a5d05e --- /dev/null +++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.scss @@ -0,0 +1,21 @@ +:host { + /* styles.scss asks the page for the large size; the rating keeps its own + default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.rating-card { + width: 15rem; + box-shadow: var(--ig-elevation-2); +} + +.rating-card igx-card-content { + display: flex; + padding-bottom: 0.5rem; +} diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.ts b/src/app/data-entries/rating/rating-overview/rating-overview.component.ts new file mode 100644 index 000000000..a10465601 --- /dev/null +++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.ts @@ -0,0 +1,20 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-overview', + styleUrls: ['./rating-overview.component.scss'], + templateUrl: './rating-overview.component.html', + imports: [ + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardContentDirective + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingOverviewComponent { } diff --git a/src/app/data-entries/rating/rating-size/rating-size.component.html b/src/app/data-entries/rating/rating-size/rating-size.component.html new file mode 100644 index 000000000..e38e1dd61 --- /dev/null +++ b/src/app/data-entries/rating/rating-size/rating-size.component.html @@ -0,0 +1,14 @@ +
+
+ Small + +
+
+ Medium + +
+
+ Large + +
+
diff --git a/src/app/data-entries/rating/rating-size/rating-size.component.scss b/src/app/data-entries/rating/rating-size/rating-size.component.scss new file mode 100644 index 000000000..da476f618 --- /dev/null +++ b/src/app/data-entries/rating/rating-size/rating-size.component.scss @@ -0,0 +1,44 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.sizes { + display: flex; + align-items: center; + gap: 3.75rem; +} + +.size { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.size-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} + +igc-rating { + --ig-rating-label-color: var(--ig-gray-700); +} + +.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-entries/rating/rating-size/rating-size.component.ts b/src/app/data-entries/rating/rating-size/rating-size.component.ts new file mode 100644 index 000000000..627dcd2f8 --- /dev/null +++ b/src/app/data-entries/rating/rating-size/rating-size.component.ts @@ -0,0 +1,13 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-size', + styleUrls: ['./rating-size.component.scss'], + templateUrl: './rating-size.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingSizeComponent { } diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.html b/src/app/data-entries/rating/rating-states/rating-states.component.html new file mode 100644 index 000000000..bcdd9be75 --- /dev/null +++ b/src/app/data-entries/rating/rating-states/rating-states.component.html @@ -0,0 +1,10 @@ +
+
+ Empty State + +
+
+ Full State + +
+
diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.scss b/src/app/data-entries/rating/rating-states/rating-states.component.scss new file mode 100644 index 000000000..e3a64700f --- /dev/null +++ b/src/app/data-entries/rating/rating-states/rating-states.component.scss @@ -0,0 +1,36 @@ +:host { + /* styles.scss asks the page for the large size; the ratings keep their own + default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: flex; + align-items: center; + gap: 3.75rem; +} + +.state { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.state-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} + +igc-rating { + --ig-rating-label-color: var(--ig-gray-700); +} diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.ts b/src/app/data-entries/rating/rating-states/rating-states.component.ts new file mode 100644 index 000000000..9b3ebf7e0 --- /dev/null +++ b/src/app/data-entries/rating/rating-states/rating-states.component.ts @@ -0,0 +1,13 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-states', + styleUrls: ['./rating-states.component.scss'], + templateUrl: './rating-states.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingStatesComponent { } diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.html b/src/app/data-entries/rating/rating-styling/rating-styling.component.html new file mode 100644 index 000000000..73a98ab6e --- /dev/null +++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.html @@ -0,0 +1,17 @@ +
+
+ Custom icon and color + + @for (symbol of symbols; track symbol) { + + + + + } + +
+
+ 10 stars + +
+
diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.scss b/src/app/data-entries/rating/rating-styling/rating-styling.component.scss new file mode 100644 index 000000000..e9921a60b --- /dev/null +++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.scss @@ -0,0 +1,45 @@ +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-rating-styling { + /* styles.scss asks the page for the large size; the ratings keep their own + default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.examples { + display: flex; + align-items: center; + gap: 3.75rem; +} + +.example { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.example-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.1px; + color: #556c86; +} + +.heart-rating { + --ig-rating-symbol-full-color: #d9357f; + --ig-rating-symbol-empty-color: #d9357f; +} + +.star-rating { + --ig-rating-symbol-full-color: #faa419; + --ig-rating-symbol-empty-color: #8a8a8a; +} diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.ts b/src/app/data-entries/rating/rating-styling/rating-styling.component.ts new file mode 100644 index 000000000..0eb95791b --- /dev/null +++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.ts @@ -0,0 +1,29 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core'; +import { configureTheme, defineComponents, IgcIconComponent, IgcRatingComponent, IgcRatingSymbolComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent, IgcRatingSymbolComponent, IgcIconComponent); + +const icons = [ + { name: 'favorite', text: '' }, + { name: 'favorite_border', text: '' } +]; + +@Component({ + selector: 'app-rating-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./rating-styling.component.scss'], + templateUrl: './rating-styling.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingStylingComponent { + public symbols = [1, 2, 3, 4, 5]; + + constructor() { + // The sample loads the Bootstrap light theme in its styles, so the + // ratings take the matching shadow DOM styles regardless of the theme + // the documentation posts down before the sample renders. + configureTheme('bootstrap', 'light'); + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + } +} diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html new file mode 100644 index 000000000..84a114cb8 --- /dev/null +++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html @@ -0,0 +1,23 @@ +
+
+ Wireless headphones +
+ Wireless Headphones + Great sound quality and battery life! +
+ $89 +
+
+ + + +
+
diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss new file mode 100644 index 000000000..2802b276f --- /dev/null +++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss @@ -0,0 +1,26 @@ +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-rating-tailwind-styling { + /* styles.scss asks the page for the large size; the rating and the button + keep their own default medium size here. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +/* The theme sets the button's padding and typography in a later layer than + Tailwind's utilities, so the design's values are set here instead. */ +.submit-review { + padding-inline: 1rem; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.25rem; + letter-spacing: 0.1px; + text-transform: none; +} diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts new file mode 100644 index 000000000..90215c81c --- /dev/null +++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts @@ -0,0 +1,22 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core'; +import { configureTheme, defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-rating-tailwind-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./rating-tailwind-styling.component.scss'], + templateUrl: './rating-tailwind-styling.component.html', + imports: [IgxButtonDirective], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class RatingTailwindStylingComponent { + constructor() { + // The sample loads the Bootstrap light theme in its styles, so the + // rating takes the matching shadow DOM styles regardless of the theme + // the documentation posts down before the sample renders. + configureTheme('bootstrap', 'light'); + } +} diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts index 03f2ef9c8..ae0edac8f 100644 --- a/src/app/services/theme.service.ts +++ b/src/app/services/theme.service.ts @@ -1,6 +1,7 @@ import { isPlatformBrowser } from '@angular/common'; import { DOCUMENT, Injectable, PLATFORM_ID, inject, signal } from '@angular/core'; import { THEME_TOKEN, type IgxTheme } from 'igniteui-angular/core'; +import { configureTheme, type Theme, type ThemeVariant } from 'igniteui-webcomponents'; /** * Message type posted by the documentation site's theming widget into the @@ -163,7 +164,10 @@ export class ThemeService { const link = this.themeLink(); if (!link.getAttribute('href')?.endsWith(href)) { - link.addEventListener('load', () => this.loadTypeface(), { once: true }); + link.addEventListener('load', () => { + this.syncWebComponentsTheme(); + this.loadTypeface(); + }, { once: true }); link.href = href; } @@ -197,6 +201,26 @@ export class ThemeService { return link; } + /** + * Web components such as igc-rating adopt a stylesheet per theme in their + * shadow DOM, and they read the theme off `--ig-theme` only once, when the + * first of them connects. Once a theme stylesheet is in place, hand them + * the theme it declares. It is read back from the page rather than taken + * from the selection, so samples that load a theme of their own keep it. + */ + private syncWebComponentsTheme(): void { + const styles = this.document.defaultView?.getComputedStyle(this.document.documentElement); + + if (!styles) { + return; + } + + configureTheme( + styles.getPropertyValue('--ig-theme').trim() as Theme, + styles.getPropertyValue('--ig-theme-variant').trim() as ThemeVariant + ); + } + /** * Each theme comes with its own typeface. Once a theme stylesheet is in * place, take the first family off `--ig-font-family` and pick it up from From 4dfae67e47bc6a3ad0e5935cbd1df4f6d2691100 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Fri, 23 Oct 2026 18:57:24 +0300 Subject: [PATCH 6/6] feat(icon): update samples content (#4051) --- live-editing/configs/IconConfigGenerator.ts | 25 ++-- .../data-display/data-display-routes-data.ts | 5 +- src/app/data-display/data-display.routes.ts | 54 ++------ .../icon-overview.component.html | 10 ++ .../icon-overview.component.scss | 18 +++ .../icon-overview/icon-overview.component.ts | 26 ++++ .../icon-sample-1.component.html | 21 --- .../icon-sample-1.component.scss | 14 -- .../icon-sample-1/icon-sample-1.component.ts | 10 -- .../icon-sample-2.component.html | 8 -- .../icon-sample-2.component.scss | 17 --- .../icon-sample-2/icon-sample-2.component.ts | 10 -- .../icon-sample-3.component.html | 1 - .../icon-sample-3.component.scss | 3 - .../icon-sample-3/icon-sample-3.component.ts | 10 -- .../icon-sample-4.component.html | 1 - .../icon-sample-4.component.scss | 3 - .../icon-sample-4/icon-sample-4.component.ts | 10 -- .../icon-sample-5.component.html | 1 - .../icon-sample-5.component.scss | 3 - .../icon-sample-5/icon-sample-5.component.ts | 10 -- .../icon/icon-size/icon-size.component.html | 8 ++ .../icon/icon-size/icon-size.component.scss | 39 ++++++ .../icon/icon-size/icon-size.component.ts | 10 ++ .../icon-styling-sample.component.html | 17 --- .../icon-styling-sample.component.scss | 11 -- .../icon-styling-sample.component.ts | 10 -- .../icon/icon-styling-sample/layout.scss | 18 --- .../icon-styling/icon-styling.component.html | 33 +++++ .../icon-styling/icon-styling.component.scss | 128 ++++++++++++++++++ .../icon-styling/icon-styling.component.ts | 27 ++++ ...con-tailwind-styling-sample.component.html | 1 - ...con-tailwind-styling-sample.component.scss | 0 .../icon-tailwind-styling-sample.component.ts | 10 -- .../icon-tailwind-styling.component.html | 40 ++++++ .../icon-tailwind-styling.component.scss | 22 +++ .../icon-tailwind-styling.component.ts | 39 ++++++ .../material-symbols.component.html | 18 --- .../material-symbols.component.scss | 22 --- .../material-symbols.component.ts | 17 --- .../svg-icon-sample.component.html | 23 ---- .../svg-icon-sample.component.scss | 13 -- .../svg-icon-sample.component.ts | 24 ---- src/assets/images/svg/contains.svg | 21 --- src/assets/images/svg/does_not_contain.svg | 21 --- src/assets/images/svg/does_not_equal.svg | 21 --- src/assets/images/svg/ends_with.svg | 21 --- src/assets/images/svg/equals.svg | 21 --- src/assets/images/svg/is_empty.svg | 21 --- src/assets/images/svg/starts_with.svg | 21 --- 50 files changed, 427 insertions(+), 510 deletions(-) create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.html create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.scss create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.html create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.scss create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.ts delete mode 100644 src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html delete mode 100644 src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss delete mode 100644 src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts delete mode 100644 src/app/data-display/icon/icon-styling-sample/layout.scss create mode 100644 src/app/data-display/icon/icon-styling/icon-styling.component.html create mode 100644 src/app/data-display/icon/icon-styling/icon-styling.component.scss create mode 100644 src/app/data-display/icon/icon-styling/icon-styling.component.ts delete mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html delete mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss delete mode 100644 src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts create mode 100644 src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html create mode 100644 src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss create mode 100644 src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.html delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.scss delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.ts delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts delete mode 100644 src/assets/images/svg/contains.svg delete mode 100644 src/assets/images/svg/does_not_contain.svg delete mode 100644 src/assets/images/svg/does_not_equal.svg delete mode 100644 src/assets/images/svg/ends_with.svg delete mode 100644 src/assets/images/svg/equals.svg delete mode 100644 src/assets/images/svg/is_empty.svg delete mode 100644 src/assets/images/svg/starts_with.svg diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts index 8666988c7..73cd20dec 100644 --- a/live-editing/configs/IconConfigGenerator.ts +++ b/live-editing/configs/IconConfigGenerator.ts @@ -15,40 +15,41 @@ export class IconConfigGenerator implements IConfigGenerator { public generateConfigs(): Config[] { const configs = new Array(); - // icon sample 1 + // icon overview configs.push(new Config({ - component: 'IconSample1Component', + component: 'IconOverviewComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); - // SVG icon sample + // icon size configs.push(new Config({ - component: 'SvgIconSampleComponent', + component: 'IconSizeComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); - // Icon Styling Sample + // icon styling configs.push(new Config({ - component: 'IconStylingSampleComponent', - additionalFiles: ["/src/app/data-display/icon/icon-styling-sample/layout.scss"], + component: 'IconStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); - // Icon Service Sample + // icon tailwind styling configs.push(new Config({ - component: 'IconServiceSampleComponent', + component: 'IconTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], + additionalFiles: [".postcssrc.json"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); - // Material Symbols Sample + // Icon Service Sample configs.push(new Config({ - component: 'MaterialSymbolsComponent', + component: 'IconServiceSampleComponent', appConfig: BaseAppConfig, - shortenComponentPathBy: "/data-display/material-symbols/" + shortenComponentPathBy: "/data-display/icon/" })); // Material icons extended sample diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 515f44a66..7c98dbdb2 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -28,12 +28,11 @@ export const dataDisplayRoutesData = { // tslint:disable-next-line:max-line-length "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" }, "circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" }, - "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" }, + "icon-overview": { displayName: "Icon Overview", parentName: "Icon" }, + "icon-size": { displayName: "Icon Size", parentName: "Icon" }, "icon-service": { displayName: "Icon Service", parentName: "Icon" }, "icon-styling": { displayName: "Icon Styling", parentName: "Icon" }, "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" }, - "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" }, - "material-symbols": { displayName: "Material Symbols", parentName: "Icon" }, "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" }, "igx-for-sample-1": { displayName: "List with igxFor directive", parentName: "For" }, "igx-for-sample-2": { displayName: "IgxFor Horizontal virtualization", parentName: "For" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 41d01b771..a0ae6a77d 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -25,15 +25,11 @@ import { CircularDynamicSampleComponent } from './circular-progressbar/circular- import { CircularIndeterminateProgressbarComponent } from './circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component'; import { CircularProgressbarComponent } from './circular-progressbar/circular-progressbar.component'; import { CircularStylingSampleComponent } from './circular-progressbar/circular-styling-sample/circular-styling-sample.component'; -import { IconSample1Component } from './icon/icon-sample-1/icon-sample-1.component'; -import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.component'; -import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component'; -import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component'; -import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component'; -import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component'; -import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component'; +import { IconOverviewComponent } from './icon/icon-overview/icon-overview.component'; +import { IconSizeComponent } from './icon/icon-size/icon-size.component'; +import { IconStylingComponent } from './icon/icon-styling/icon-styling.component'; +import { IconTailwindStylingComponent } from './icon/icon-tailwind-styling/icon-tailwind-styling.component'; import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component'; -import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component'; import { IgxForComponent } from './igxFor/igxFor.component'; import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component'; import { VirtualScrollOverviewComponent } from './virtual-scroll/virtual-scroll-overview/virtual-scroll-overview.component'; @@ -60,7 +56,6 @@ import { TextHighlightSample2Component } from './text-highlight/text-highlight-s import { TextHighlightStyleComponent } from './text-highlight/text-highlight-style/text-highlight-style.component'; import { MaterialIconsExtendedComponent} from './icon/material-icons-extended/material-icons-extended.component'; -import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbols.component'; import { QrCodeOverviewComponent } from './qr-code/qr-code-overview/qr-code-overview.component'; import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-styling.component'; import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component'; @@ -194,34 +189,14 @@ export const DataDisplayRoutes: Routes = [ path: 'circular-progressbar' }, { - component: IconSample1Component, - data: dataDisplayRoutesData['icon-sample-1'], - path: 'icon-sample-1' + component: IconOverviewComponent, + data: dataDisplayRoutesData['icon-overview'], + path: 'icon-overview' }, { - component: IconSample2Component, - data: dataDisplayRoutesData['icon-sample-2'], - path: 'icon-sample-2' - }, - { - component: IconSample3Component, - data: dataDisplayRoutesData['icon-sample-3'], - path: 'icon-sample-3' - }, - { - component: IconSample4Component, - data: dataDisplayRoutesData['icon-sample-4'], - path: 'icon-sample-4' - }, - { - component: IconSample5Component, - data: dataDisplayRoutesData['icon-sample-5'], - path: 'icon-sample-5' - }, - { - component: SvgIconSampleComponent, - data: dataDisplayRoutesData['svg-icon-sample'], - path: 'svg-icon-sample' + component: IconSizeComponent, + data: dataDisplayRoutesData['icon-size'], + path: 'icon-size' }, { component: IgxForComponent, @@ -334,12 +309,12 @@ export const DataDisplayRoutes: Routes = [ path: 'icon-service' }, { - component: IconStylingSampleComponent, + component: IconStylingComponent, data: dataDisplayRoutesData['icon-styling'], path: 'icon-styling' }, { - component: IconTailwindStylingSampleComponent, + component: IconTailwindStylingComponent, data: dataDisplayRoutesData['icon-tailwind-styling'], path: 'icon-tailwind-styling' }, @@ -353,11 +328,6 @@ export const DataDisplayRoutes: Routes = [ data: dataDisplayRoutesData['chip-tailwind-styling'], path: 'chip-tailwind-styling' }, - { - component: MaterialSymbolsComponent, - data: dataDisplayRoutesData['material-symbols'], - path: 'material-symbols' - }, { component: MaterialIconsExtendedComponent, data: dataDisplayRoutesData['material-icons-extended'], diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.html b/src/app/data-display/icon/icon-overview/icon-overview.component.html new file mode 100644 index 000000000..9377ace28 --- /dev/null +++ b/src/app/data-display/icon/icon-overview/icon-overview.component.html @@ -0,0 +1,10 @@ + + + @for (item of menuItems; track item.label) { + + + {{ item.label }} + + } + + diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.scss b/src/app/data-display/icon/icon-overview/icon-overview.component.scss new file mode 100644 index 000000000..b48df7a53 --- /dev/null +++ b/src/app/data-display/icon/icon-overview/icon-overview.component.scss @@ -0,0 +1,18 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.menu { + height: auto; +} + +/* A pinned drawer fills the height of its container. Here it is only as tall + as its items. */ +.menu ::ng-deep .igx-nav-drawer__aside { + height: auto; + min-height: auto; +} diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.ts b/src/app/data-display/icon/icon-overview/icon-overview.component.ts new file mode 100644 index 000000000..3ca83b4a8 --- /dev/null +++ b/src/app/data-display/icon/icon-overview/icon-overview.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer'; + +interface MenuItem { + label: string; + icon: string; +} + +@Component({ + selector: 'app-icon-overview', + styleUrls: ['./icon-overview.component.scss'], + templateUrl: './icon-overview.component.html', + imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent] +}) +export class IconOverviewComponent { + public menuItems: MenuItem[] = [ + { label: 'Home', icon: 'home' }, + { label: 'Inbox', icon: 'mail' }, + { label: 'Reports', icon: 'assignment' }, + { label: 'Settings', icon: 'settings' }, + { label: 'Support', icon: 'feedback' } + ]; + + public activeItem = 'Home'; +} diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html deleted file mode 100644 index 0eb739c30..000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
- sentiment_very_satisfied -
- -
- home -
- -
- airplanemode_active -
- -
- favorite -
- -
- search -
-
diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss deleted file mode 100644 index 6284f642c..000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts deleted file mode 100644 index 41cdf3d72..000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-1', - styleUrls: ['./icon-sample-1.component.scss'], - templateUrl: './icon-sample-1.component.html', - imports: [IgxIconComponent] -}) -export class IconSample1Component { } diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html deleted file mode 100644 index 16f6cc1c3..000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
- phone_iphone -
-
- phone_iphone -
-
diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss deleted file mode 100644 index a39f68af4..000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -.custom-size { - --size: 56px; -} - -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 8px; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - height: 44px; - align-items: center; - max-width: 80px; -} diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts deleted file mode 100644 index 82694a9f6..000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-2', - styleUrls: ['./icon-sample-2.component.scss'], - templateUrl: './icon-sample-2.component.html', - imports: [IgxIconComponent] -}) -export class IconSample2Component { } diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html deleted file mode 100644 index 66a209695..000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html +++ /dev/null @@ -1 +0,0 @@ -home diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss deleted file mode 100644 index bf5c4a2e1..000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts deleted file mode 100644 index 4b663ead5..000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-3', - styleUrls: ['./icon-sample-3.component.scss'], - templateUrl: './icon-sample-3.component.html', - imports: [IgxIconComponent] -}) -export class IconSample3Component { } diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html deleted file mode 100644 index c3d5fa411..000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html +++ /dev/null @@ -1 +0,0 @@ -volume_off diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss deleted file mode 100644 index bf5c4a2e1..000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts deleted file mode 100644 index ea39a69e7..000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-4', - styleUrls: ['./icon-sample-4.component.scss'], - templateUrl: './icon-sample-4.component.html', - imports: [IgxIconComponent] -}) -export class IconSample4Component { } diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html deleted file mode 100644 index 5140923d0..000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html +++ /dev/null @@ -1 +0,0 @@ -bluetooth diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss deleted file mode 100644 index bf5c4a2e1..000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts deleted file mode 100644 index 182f6beb0..000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-5', - styleUrls: ['./icon-sample-5.component.scss'], - templateUrl: './icon-sample-5.component.html', - imports: [IgxIconComponent] -}) -export class IconSample5Component { } diff --git a/src/app/data-display/icon/icon-size/icon-size.component.html b/src/app/data-display/icon/icon-size/icon-size.component.html new file mode 100644 index 000000000..8b39fae7a --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.html @@ -0,0 +1,8 @@ +
+ + Large + + Medium + + Small +
diff --git a/src/app/data-display/icon/icon-size/icon-size.component.scss b/src/app/data-display/icon/icon-size/icon-size.component.scss new file mode 100644 index 000000000..ee81b47b6 --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.scss @@ -0,0 +1,39 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-sizes { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-items: center; + column-gap: 4.25rem; + row-gap: 1.0625rem; +} + +.icon-sizes igx-icon { + color: var(--ig-gray-800); +} + +.size-large { + --ig-size: var(--ig-size-large); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; +} diff --git a/src/app/data-display/icon/icon-size/icon-size.component.ts b/src/app/data-display/icon/icon-size/icon-size.component.ts new file mode 100644 index 000000000..7c9a086ef --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-size', + styleUrls: ['./icon-size.component.scss'], + templateUrl: './icon-size.component.html', + imports: [IgxIconComponent] +}) +export class IconSizeComponent { } diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html deleted file mode 100644 index 417a699ee..000000000 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- person -
-
- wifi -
-
- laptop_mac -
-
- pin_drop -
-
- cloud -
-
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss deleted file mode 100644 index e3ab907c2..000000000 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -$custom-icon-theme: icon-theme( - $color: #1481b8, - $disabled-color: #494949 -); - -:host { - @include tokens($custom-icon-theme); -} diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts deleted file mode 100644 index 09050f3ab..000000000 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-styling-sample', - styleUrls: ['./icon-styling-sample.component.scss'], - templateUrl: './icon-styling-sample.component.html', - imports: [IgxIconComponent] -}) -export class IconStylingSampleComponent { } diff --git a/src/app/data-display/icon/icon-styling-sample/layout.scss b/src/app/data-display/icon/icon-styling-sample/layout.scss deleted file mode 100644 index 6951373f0..000000000 --- a/src/app/data-display/icon/icon-styling-sample/layout.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} - -.igx-icon:hover { - color: #0a415c; -} \ No newline at end of file diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.html b/src/app/data-display/icon/icon-styling/icon-styling.component.html new file mode 100644 index 000000000..729cceca6 --- /dev/null +++ b/src/app/data-display/icon/icon-styling/icon-styling.component.html @@ -0,0 +1,33 @@ +
+
+ + + + +
+
+ @for (action of actions; track action.label) { + + {{ action.label }} + } +
+
diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.scss b/src/app/data-display/icon/icon-styling/icon-styling.component.scss new file mode 100644 index 000000000..c2bf9fba1 --- /dev/null +++ b/src/app/data-display/icon/icon-styling/icon-styling.component.scss @@ -0,0 +1,128 @@ +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-icon-styling { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-styling { + --ig-font-family: "Aktiv Grotesk", Arial, sans-serif; + + display: flex; + flex-direction: column; + align-items: center; + gap: 2.8125rem; +} + +.button-row { + /* The buttons keep the medium size of the design, while styles.scss asks + the page for the large one. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + gap: 1.5rem; +} + +.button-row .igx-button { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.1px; + text-transform: none; +} + +.download-button { + border-color: #a9b8cc; + background: #e5ebf3; + color: #344b65; + box-shadow: none; +} + +.download-button igx-icon { + color: #344b65; +} + +.continue-button { + --ig-outlined-button-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-focus-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-active-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-visible-background: rgb(0 93 204 / 16%); + + border-color: #005dcc; + color: #005dcc; +} + +.continue-button igx-icon { + color: #005dcc; +} + +.delete-button { + --ig-outlined-button-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-focus-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-active-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-visible-background: rgb(223 27 116 / 16%); + + border-color: #df1b74; + color: #df1b74; +} + +.delete-button igx-icon { + color: #df1b74; +} + +.add-button { + --ig-size: var(--ig-size-small); + + width: 2.25rem; + min-width: 0; + height: 2.25rem; + min-height: 0; + padding: 0; + border: 1px solid #0176ff; + border-radius: 50%; + background: #cce4ff; + box-shadow: none; +} + +.add-button igx-icon { + color: #005dcc; +} + +.icon-toolbar { + display: flex; + gap: 1.5rem; + padding: 0.5rem; + border: 1px solid #e5ebf3; + border-radius: 999px; + background: #fff; +} + +.icon-toolbar .igx-icon-button { + --ig-flat-icon-button-hover-background: #f8f8f8; + --ig-flat-icon-button-focus-background: #e0e0e0; + --ig-flat-icon-button-focus-hover-background: #f8f8f8; + --ig-flat-icon-button-active-background: #e0e0e0; + + width: 1.5rem; + min-width: 0; + height: 1.5rem; + min-height: 0; + padding: 0; + border-radius: 50%; +} + +.icon-toolbar igx-icon { + color: #344b65; +} + +/* The tooltips are moved to the overlay, outside of the toolbar. */ +.icon-tooltip { + --ig-tooltip-background: rgb(52 75 101 / 90%); + --ig-tooltip-text-color: #fff; +} diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.ts b/src/app/data-display/icon/icon-styling/icon-styling.component.ts new file mode 100644 index 000000000..312bdf652 --- /dev/null +++ b/src/app/data-display/icon/icon-styling/icon-styling.component.ts @@ -0,0 +1,27 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { PositionSettings } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +interface ToolbarAction { + icon: string; + label: string; +} + +@Component({ + selector: 'app-icon-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./icon-styling.component.scss'], + templateUrl: './icon-styling.component.html', + imports: [IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxTooltipDirective, IgxTooltipTargetDirective] +}) +export class IconStylingComponent { + public actions: ToolbarAction[] = [ + { icon: 'edit', label: 'Edit' }, + { icon: 'content_copy', label: 'Copy' }, + { icon: 'share', label: 'Share' }, + { icon: 'delete', label: 'Delete' } + ]; + + public tooltipPosition: PositionSettings = { offset: 25 }; +} diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html deleted file mode 100644 index 9ee3ab609..000000000 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html +++ /dev/null @@ -1 +0,0 @@ -person diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts deleted file mode 100644 index abb7841ea..000000000 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-tailwind-styling-sample', - styleUrls: ['./icon-tailwind-styling-sample.component.scss'], - templateUrl: './icon-tailwind-styling-sample.component.html', - imports: [IgxIconComponent] -}) -export class IconTailwindStylingSampleComponent { } diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html new file mode 100644 index 000000000..bcdb4c06d --- /dev/null +++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html @@ -0,0 +1,40 @@ +
+ + + + search + + + + + + + + + + + + + +
diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss new file mode 100644 index 000000000..a6e5c39ea --- /dev/null +++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss @@ -0,0 +1,22 @@ +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-icon-tailwind-styling { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +/* The icons sit inside the field, so the input drops the border that would set + them apart. The border is on the input's wrapper, which the template can't + reach with a class. */ +.search-field .igx-input-group__bundle-main, +.email-field .igx-input-group__bundle-main { + border-inline-start-width: 0; +} + +.email-field.igx-input-group--suffixed .igx-input-group__bundle-main { + border-inline-end-width: 0; +} diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts new file mode 100644 index 000000000..9d20bc1cc --- /dev/null +++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts @@ -0,0 +1,39 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +@Component({ + selector: 'app-icon-tailwind-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./icon-tailwind-styling.component.scss'], + templateUrl: './icon-tailwind-styling.component.html', + imports: [ + IgxInputGroupComponent, + IgxInputDirective, + IgxLabelDirective, + IgxPrefixDirective, + IgxSuffixDirective, + IgxHintDirective, + IgxIconComponent, + IgxIconButtonDirective + ] +}) +export class IconTailwindStylingComponent { + public fieldClasses = 'w-[260px] [--ig-input-group-input-prefix-background:transparent] [--ig-input-group-input-prefix-background--filled:transparent] [--ig-input-group-input-prefix-background--focused:transparent] [--ig-input-group-input-suffix-background:transparent] [--ig-input-group-input-suffix-background--filled:transparent] [--ig-input-group-input-suffix-background--focused:transparent] [--ig-input-group-placeholder-color:#344b65] [--ig-input-group-hover-placeholder-color:#344b65] [--ig-input-group-focused-secondary-color:transparent]'; + public focusClasses = 'focus-within:[--ig-input-group-border-color:var(--ig-primary-500)] focus-within:[--ig-input-group-focused-border-color:var(--ig-primary-500)]'; + public invalidClasses = '[--ig-input-group-border-color:#ff134a] [--ig-input-group-focused-border-color:#ff134a]'; + + public passwordVisible = false; + public email = 'ana@'; + + public get emailInvalid(): boolean { + return !emailPattern.test(this.email); + } + + public onEmailInput(event: Event): void { + this.email = (event.target as HTMLInputElement).value; + } +} diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.html b/src/app/data-display/icon/material-symbols/material-symbols.component.html deleted file mode 100644 index 368fc8f0f..000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.html +++ /dev/null @@ -1,18 +0,0 @@ - -
-
- grade -
-
- favorite -
-
- -
-
- diamond -
-
- auto_awesome -
-
\ No newline at end of file diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.scss b/src/app/data-display/icon/material-symbols/material-symbols.component.scss deleted file mode 100644 index 13403b140..000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.scss +++ /dev/null @@ -1,22 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} - -.custom-icon { - font-variation-settings: - 'FILL' 0, - 'wght' 200, - 'GRAD' 0, - 'opsz' 40 -} \ No newline at end of file diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.ts b/src/app/data-display/icon/material-symbols/material-symbols.component.ts deleted file mode 100644 index 88a7a8d5a..000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-material-symbols', - templateUrl: './material-symbols.component.html', - styleUrls: ['./material-symbols.component.scss'], - imports: [IgxIconComponent] -}) -export class MaterialSymbolsComponent implements OnInit { - private iconService = inject(IgxIconService); - - - public ngOnInit() { - this.iconService.registerFamilyAlias('material-symbols', 'material-symbols-outlined'); - } -} diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html deleted file mode 100644 index e9856835e..000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss deleted file mode 100644 index 5048e080c..000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 10%; - height: 44px; - justify-content: center; - align-items: center; -} diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts deleted file mode 100644 index 8df38cf20..000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-svg-icon-sample', - styleUrls: ['./svg-icon-sample.component.scss'], - templateUrl: './svg-icon-sample.component.html', - imports: [IgxIconComponent] -}) -export class SvgIconSampleComponent implements OnInit { - private iconService = inject(IgxIconService); - - - public ngOnInit() { - // register custom SVG icons - this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons'); - this.iconService.addSvgIcon('does_not_contain', 'assets/images/svg/does_not_contain.svg', 'filter-icons'); - this.iconService.addSvgIcon('does_not_equal', 'assets/images/svg/does_not_equal.svg', 'filter-icons'); - this.iconService.addSvgIcon('ends_with', 'assets/images/svg/ends_with.svg', 'filter-icons'); - this.iconService.addSvgIcon('equals', 'assets/images/svg/equals.svg', 'filter-icons'); - this.iconService.addSvgIcon('is_empty', 'assets/images/svg/is_empty.svg', 'filter-icons'); - this.iconService.addSvgIcon('starts_with', 'assets/images/svg/starts_with.svg', 'filter-icons'); - } -} diff --git a/src/assets/images/svg/contains.svg b/src/assets/images/svg/contains.svg deleted file mode 100644 index a69a25741..000000000 --- a/src/assets/images/svg/contains.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/contains - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/does_not_contain.svg b/src/assets/images/svg/does_not_contain.svg deleted file mode 100644 index 75e0c0a9a..000000000 --- a/src/assets/images/svg/does_not_contain.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/does not contain - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/does_not_equal.svg b/src/assets/images/svg/does_not_equal.svg deleted file mode 100644 index 585f8475a..000000000 --- a/src/assets/images/svg/does_not_equal.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/does not equal - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/ends_with.svg b/src/assets/images/svg/ends_with.svg deleted file mode 100644 index 6e0ce79bf..000000000 --- a/src/assets/images/svg/ends_with.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/ends with - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/equals.svg b/src/assets/images/svg/equals.svg deleted file mode 100644 index 47cf89046..000000000 --- a/src/assets/images/svg/equals.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/equals - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/is_empty.svg b/src/assets/images/svg/is_empty.svg deleted file mode 100644 index dd271bcbb..000000000 --- a/src/assets/images/svg/is_empty.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/is empty - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/starts_with.svg b/src/assets/images/svg/starts_with.svg deleted file mode 100644 index c5e44e0b6..000000000 --- a/src/assets/images/svg/starts_with.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/starts with - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file