From 74a46c09bbae98ba02d423f9450b4db708de5af6 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 22 Jul 2026 13:33:30 +0300 Subject: [PATCH 1/2] feat(accordion): add programmatic expansion sample --- .../configs/AccordionConfigGenerator.ts | 6 +++++ ...dion-programmatic-expansion.component.html | 26 +++++++++++++++++++ ...dion-programmatic-expansion.component.scss | 17 ++++++++++++ ...ordion-programmatic-expansion.component.ts | 14 ++++++++++ src/app/layouts/layouts-routes-data.ts | 1 + src/app/layouts/layouts.routes.ts | 6 +++++ 6 files changed, 70 insertions(+) create mode 100644 src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html create mode 100644 src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss create mode 100644 src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts diff --git a/live-editing/configs/AccordionConfigGenerator.ts b/live-editing/configs/AccordionConfigGenerator.ts index 58d7c2bca..d35dece3e 100644 --- a/live-editing/configs/AccordionConfigGenerator.ts +++ b/live-editing/configs/AccordionConfigGenerator.ts @@ -31,6 +31,12 @@ export class AccordionConfigGenerator implements IConfigGenerator { shortenComponentPathBy: '/layouts/accordion/' })); + configs.push(new Config({ + component: 'AccordionProgrammaticExpansionComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: '/layouts/accordion/' + })); + configs.push(new Config({ component: 'AccordionStyleComponent', additionalFiles: ["/src/app/layouts/accordion/accordion-style/layout.scss"], diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html new file mode 100644 index 000000000..4dbdf3786 --- /dev/null +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html @@ -0,0 +1,26 @@ +
+ + +
+ +
+ + + + Title Panel 1 + + + Content Panel 1 + + + + + + Title Panel 2 + + + Content Panel 2 + + + +
diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss new file mode 100644 index 000000000..8a98da23b --- /dev/null +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss @@ -0,0 +1,17 @@ +$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); + +.button-group { + display: flex; + gap: 8px; + padding: 16px; +} + +.sample-wrapper { + overflow-y: auto; + max-height: 380px; + margin: 8px; +} + +igx-expansion-panel { + border: $ep-sample-border; +} diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts new file mode 100644 index 000000000..dbb99d419 --- /dev/null +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts @@ -0,0 +1,14 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; + +@Component({ + selector: 'app-accordion-programmatic-expansion', + styleUrls: ['./accordion-programmatic-expansion.component.scss'], + templateUrl: './accordion-programmatic-expansion.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxButtonDirective, IgxRippleDirective, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionProgrammaticExpansionComponent { +} diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index 984fe9348..26893a814 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -4,6 +4,7 @@ export const layoutsRoutesData = { 'accordion-sample-1': { displayName: 'Accordion 1', parentName: 'Accordion' }, 'accordion-sample-2': { displayName: 'Accordion 2', parentName: 'Accordion' }, 'accordion-sample-3': { displayName: 'Accordion 3', parentName: 'Accordion' }, + 'accordion-programmatic-expansion': { displayName: 'Accordion Programmatic Expansion', parentName: 'Accordion' }, 'accordion-style': { displayName: 'Accordion Styling', parentName: 'Accordion' }, 'avatar-sample-1': { displayName: 'Avatar with Initials', parentName: 'Avatar' }, 'avatar-sample-2': { displayName: 'Avatar with Image', parentName: 'Avatar' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index a8f23171c..b1823c4ac 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -80,6 +80,7 @@ import { View3Component } from './tabs/views/view3/view3.component'; import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component'; import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component'; import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component'; +import { AccordionProgrammaticExpansionComponent } from './accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component'; import { AccordionStyleComponent } from './accordion/accordion-style/accordion-style.component'; import {StepperLabelPositionAndOrientationSampleComponent } from './stepper/stepper-label-position-and-orientation-sample/stepper-label-position-and-orientation-sample.component'; @@ -107,6 +108,11 @@ export const LayoutsRoutes: Routes = [ data: layoutsRoutesData['accordion-sample-3'], path: 'accordion-sample-3' }, + { + component: AccordionProgrammaticExpansionComponent, + data: layoutsRoutesData['accordion-programmatic-expansion'], + path: 'accordion-programmatic-expansion' + }, { component: AccordionStyleComponent, data: layoutsRoutesData['accordion-style'], From 710ba0bf74145bbc1f00b7fd613a5859edea8b39 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 27 Aug 2026 13:14:19 +0300 Subject: [PATCH 2/2] feat(accordion): update accordion layout and styling --- .../accordion-customization.component.html | 70 +++++++++++++++++++ .../accordion-customization.component.scss | 60 ++++++++++++++++ .../accordion-customization.component.ts | 52 ++++++++++++++ .../accordion-nested-scenario.component.html | 69 ++++++++++++++++++ .../accordion-nested-scenario.component.scss | 18 +++++ .../accordion-nested-scenario.component.ts | 16 +++++ .../accordion-overview.component.html | 37 ++++++++++ .../accordion-overview.component.scss | 18 +++++ .../accordion-overview.component.ts | 16 +++++ ...dion-programmatic-expansion.component.html | 62 +++++++++------- ...dion-programmatic-expansion.component.scss | 28 +++++--- ...ordion-programmatic-expansion.component.ts | 4 +- .../accordion-styling.component.html | 35 ++++++++++ .../accordion-styling.component.scss | 44 ++++++++++++ .../accordion-styling.component.ts | 12 ++++ .../accordion-tailwind-styling.component.html | 35 ++++++++++ .../accordion-tailwind-styling.component.scss | 20 ++++++ .../accordion-tailwind-styling.component.ts | 12 ++++ src/app/layouts/layouts-routes-data.ts | 5 ++ src/app/layouts/layouts.routes.ts | 30 ++++++++ 20 files changed, 606 insertions(+), 37 deletions(-) create mode 100644 src/app/layouts/accordion/accordion-customization/accordion-customization.component.html create mode 100644 src/app/layouts/accordion/accordion-customization/accordion-customization.component.scss create mode 100644 src/app/layouts/accordion/accordion-customization/accordion-customization.component.ts create mode 100644 src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.html create mode 100644 src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.scss create mode 100644 src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.ts create mode 100644 src/app/layouts/accordion/accordion-overview/accordion-overview.component.html create mode 100644 src/app/layouts/accordion/accordion-overview/accordion-overview.component.scss create mode 100644 src/app/layouts/accordion/accordion-overview/accordion-overview.component.ts create mode 100644 src/app/layouts/accordion/accordion-styling/accordion-styling.component.html create mode 100644 src/app/layouts/accordion/accordion-styling/accordion-styling.component.scss create mode 100644 src/app/layouts/accordion/accordion-styling/accordion-styling.component.ts create mode 100644 src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.html create mode 100644 src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.scss create mode 100644 src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.ts diff --git a/src/app/layouts/accordion/accordion-customization/accordion-customization.component.html b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.html new file mode 100644 index 000000000..f3d9ddfe5 --- /dev/null +++ b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.html @@ -0,0 +1,70 @@ +
+
+ + + + Transportation@if (selectedCategories) {: {{ selectedCategories }}} + Choose how you want to travel + + +

Select one or more transportation options for your trip.

+
+ @for (category of categories; track category.type) { + {{ category.type }} + } +
+ + + + + + Budget: ${{ slider.lowerValue }} - ${{ slider.upperValue }} + Set the price range + + +

Adjust the minimum and maximum cost for available options.

+
+ ${{ slider.lowerValue }} + ${{ slider.upperValue }} +
+ + + + + + + Minimum Rating@if (rating) {: {{ rating }}} + Filter by review score + + +

Choose the lowest rating you want to include in the results.

+
+ @for (ratingOption of ratingOptions; track ratingOption) { + + {{ ratingOption }} stars or more + + @for (star of [].constructor(ratingOption); track $index) { + star + } + + + } +
+ + + + + + Arrival Time{{ time }} + Set the latest arrival time + + +

Pick the latest acceptable arrival time for your trip.

+ + + + + + +
+
diff --git a/src/app/layouts/accordion/accordion-customization/accordion-customization.component.scss b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.scss new file mode 100644 index 000000000..02ab94dc3 --- /dev/null +++ b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.scss @@ -0,0 +1,60 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); +} + +.categories-container { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; +} + +.category-option, +.rating-option { + margin: 4px 0; +} + +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; +} + +.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} diff --git a/src/app/layouts/accordion/accordion-customization/accordion-customization.component.ts b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.ts new file mode 100644 index 000000000..82311cc43 --- /dev/null +++ b/src/app/layouts/accordion/accordion-customization/accordion-customization.component.ts @@ -0,0 +1,52 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; + +@Component({ + selector: 'app-accordion-customization', + styleUrls: ['./accordion-customization.component.scss'], + templateUrl: './accordion-customization.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] +}) +export class AccordionCustomizationComponent { + public readonly ratingOptions = [2, 3, 4, 5]; + public readonly sliderType = IgxSliderType; + public priceRange = new PriceRange(200, 800); + public rating = ''; + public arriveTime: Date | null = null; + + public categories = [ + { checked: false, type: 'Bike' }, + { checked: false, type: 'Motorcycle' }, + { checked: false, type: 'Car' }, + { checked: false, type: 'Taxi' }, + { checked: false, type: 'Public Transport' } + ]; + + public get selectedCategories(): string { + return this.categories + .filter(item => item.checked) + .map(item => item.type) + .join(', '); + } + + public get time(): string { + return this.arriveTime ? `: ${this.arriveTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : ''; + } +} + +class PriceRange { + constructor( + public lower: number, + public upper: number + ) { + } +} diff --git a/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.html b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.html new file mode 100644 index 000000000..7b66ad84d --- /dev/null +++ b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.html @@ -0,0 +1,69 @@ +
+
+
+ Single Expand +
+ + + + + Workspace Settings + Nested account, access, and billing options + + + + + + Profile + Name, photo, and contact details + + +

Update the public information shown to other workspace members.

+ + + + + + Security + Password and sign-in preferences + + +

Review active sessions, change your password, and configure sign-in requirements.

+ + + + + + Notifications + Email and product updates + + +

Choose the messages you receive for comments, assignments, and releases.

+ + + + + + + + + Team Access + Members, roles, and permissions + + +

Invite teammates, assign roles, and review workspace permissions.

+ + + + + + Billing + Plan, invoices, and payment method + + +

Manage subscription details, billing contacts, and invoice delivery.

+ + + +
+
diff --git a/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.scss b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.scss new file mode 100644 index 000000000..a18c6d1ff --- /dev/null +++ b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.scss @@ -0,0 +1,18 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} diff --git a/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.ts b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.ts new file mode 100644 index 000000000..38cd02d13 --- /dev/null +++ b/src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.ts @@ -0,0 +1,16 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; + +@Component({ + selector: 'app-accordion-nested-scenario', + styleUrls: ['./accordion-nested-scenario.component.scss'], + templateUrl: './accordion-nested-scenario.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [FormsModule, IgxSwitchComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionNestedScenarioComponent { + public singleBranchExpand = false; +} diff --git a/src/app/layouts/accordion/accordion-overview/accordion-overview.component.html b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.html new file mode 100644 index 000000000..953f53c2f --- /dev/null +++ b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.html @@ -0,0 +1,37 @@ +
+
+
+ Single Expand +
+ + + + + Account + Profile and security settings + + +

Update your profile details, password, and sign-in preferences.

+ + + + + Notifications + Email and product updates + + +

Choose which notifications you receive and how often they are delivered.

+ + + + + Billing + Payment and invoice settings + + +

Manage payment methods, billing contacts, and invoice delivery options.

+ + + +
+
diff --git a/src/app/layouts/accordion/accordion-overview/accordion-overview.component.scss b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.scss new file mode 100644 index 000000000..ba0bbdd4d --- /dev/null +++ b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.scss @@ -0,0 +1,18 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} diff --git a/src/app/layouts/accordion/accordion-overview/accordion-overview.component.ts b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.ts new file mode 100644 index 000000000..440f9fd55 --- /dev/null +++ b/src/app/layouts/accordion/accordion-overview/accordion-overview.component.ts @@ -0,0 +1,16 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-accordion-overview', + styleUrls: ['./accordion-overview.component.scss'], + templateUrl: './accordion-overview.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionOverviewComponent { + public singleBranchExpand = false; +} diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html index 4dbdf3786..3e16857cc 100644 --- a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html @@ -1,26 +1,40 @@ -
- - -
+
+
+
+ + +
+ + + + + Billing + Invoices and payment settings + + +

Review invoices, update payment methods, and manage billing contacts.

+ + -
- - - - Title Panel 1 - - - Content Panel 1 - - + + + Security + Password and access controls + + +

Configure password rules, multi-factor authentication, and recovery options.

+ + - - - Title Panel 2 - - - Content Panel 2 - - - -
+ + + Notifications + Product updates and account alerts + + +

Choose which product updates and account alerts are sent to your team.

+ + + +
+
diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss index 8a98da23b..6245c0186 100644 --- a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss @@ -1,17 +1,23 @@ -$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} -.button-group { - display: flex; - gap: 8px; - padding: 16px; +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; } -.sample-wrapper { - overflow-y: auto; - max-height: 380px; - margin: 8px; +.accordion-toolbar { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-bottom: 12px; } -igx-expansion-panel { - border: $ep-sample-border; +.action-button { + min-width: 96px; } diff --git a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts index dbb99d419..2c3ea0126 100644 --- a/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts +++ b/src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts @@ -1,14 +1,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @Component({ selector: 'app-accordion-programmatic-expansion', styleUrls: ['./accordion-programmatic-expansion.component.scss'], templateUrl: './accordion-programmatic-expansion.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonDirective, IgxRippleDirective, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] + imports: [IgxButtonDirective, IgxRippleDirective, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) export class AccordionProgrammaticExpansionComponent { } diff --git a/src/app/layouts/accordion/accordion-styling/accordion-styling.component.html b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.html new file mode 100644 index 000000000..62a0a5061 --- /dev/null +++ b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.html @@ -0,0 +1,35 @@ +
+
+ + + + Getting Started + Setup and onboarding + + +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + + + Billing + Invoices and payment methods + + +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + + + Security + Access and authentication + + +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + + +
+
diff --git a/src/app/layouts/accordion/accordion-styling/accordion-styling.component.scss b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.scss new file mode 100644 index 000000000..ed02571a5 --- /dev/null +++ b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.scss @@ -0,0 +1,44 @@ +@use "igniteui-angular/theming" as *; + +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +$custom-panel-theme: expansion-panel-theme( + $header-background: var(--ig-gray-100), + $header-focus-background: var(--ig-primary-50), + $body-background: var(--ig-gray-50), + $body-color: var(--ig-gray-700), + $header-title-color: var(--ig-gray-900), + $header-description-color: var(--ig-gray-900), + $header-icon-color: var(--ig-primary-500), + $border-radius: 4px +); + +:host { + @include tokens($custom-panel-theme); +} + +::ng-deep { + .igx-expansion-panel--expanded .igx-expansion-panel__header-inner { + background-color: var(--ig-primary-50); + } + + .igx-expansion-panel--expanded .igx-expansion-panel__header-title, + .igx-expansion-panel--expanded .igx-expansion-panel__header-description { + color: var(--ig-primary-700); + } + + .igx-expansion-panel__header-title { + font-weight: 600; + } +} diff --git a/src/app/layouts/accordion/accordion-styling/accordion-styling.component.ts b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.ts new file mode 100644 index 000000000..e5958cb69 --- /dev/null +++ b/src/app/layouts/accordion/accordion-styling/accordion-styling.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; + +@Component({ + selector: 'app-accordion-styling', + styleUrls: ['./accordion-styling.component.scss'], + templateUrl: './accordion-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionStylingComponent {} diff --git a/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.html b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.html new file mode 100644 index 000000000..fcd49b5f5 --- /dev/null +++ b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.html @@ -0,0 +1,35 @@ +
+
+ + + + Getting Started + Setup and onboarding + + +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + + + Billing + Invoices and payment methods + + +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + + + Security + Access and authentication + + +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + + +
+
diff --git a/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.scss b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.scss new file mode 100644 index 000000000..70523e2fd --- /dev/null +++ b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.scss @@ -0,0 +1,20 @@ +.accordion-tailwind-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +::ng-deep { + .igx-expansion-panel--expanded .igx-expansion-panel__header-inner { + background-color: var(--ig-primary-50); + } + + .igx-expansion-panel--expanded .igx-expansion-panel__header-title, + .igx-expansion-panel--expanded .igx-expansion-panel__header-description { + color: var(--ig-primary-700); + } + + .igx-expansion-panel__header-title { + font-weight: 600; + } +} diff --git a/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.ts b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.ts new file mode 100644 index 000000000..0275ca542 --- /dev/null +++ b/src/app/layouts/accordion/accordion-tailwind-styling/accordion-tailwind-styling.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; + +@Component({ + selector: 'app-accordion-tailwind-styling', + styleUrls: ['./accordion-tailwind-styling.component.scss'], + templateUrl: './accordion-tailwind-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionTailwindStylingComponent {} diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index 26893a814..07e66f1b6 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -1,6 +1,11 @@ /* eslint-disable quote-props */ export const layoutsRoutesData = { + 'accordion-customization': { displayName: 'Accordion Customization', parentName: 'Accordion' }, + 'accordion-nested-scenario': { displayName: 'Accordion Nested Scenario', parentName: 'Accordion' }, + 'accordion-overview': { displayName: 'Accordion Overview', parentName: 'Accordion' }, + 'accordion-styling': { displayName: 'Accordion Styling', parentName: 'Accordion' }, + 'accordion-tailwind-styling': { displayName: 'Accordion Tailwind Styling', parentName: 'Accordion' }, 'accordion-sample-1': { displayName: 'Accordion 1', parentName: 'Accordion' }, 'accordion-sample-2': { displayName: 'Accordion 2', parentName: 'Accordion' }, 'accordion-sample-3': { displayName: 'Accordion 3', parentName: 'Accordion' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index b1823c4ac..2dd8e0ffc 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -78,6 +78,11 @@ import { View1Component } from './tabs/views/view1/view1.component'; import { View2Component } from './tabs/views/view2/view2.component'; import { View3Component } from './tabs/views/view3/view3.component'; import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component'; +import { AccordionCustomizationComponent } from './accordion/accordion-customization/accordion-customization.component'; +import { AccordionNestedScenarioComponent } from './accordion/accordion-nested-scenario/accordion-nested-scenario.component'; +import { AccordionOverviewComponent } from './accordion/accordion-overview/accordion-overview.component'; +import { AccordionStylingComponent } from './accordion/accordion-styling/accordion-styling.component'; +import { AccordionTailwindStylingComponent } from './accordion/accordion-tailwind-styling/accordion-tailwind-styling.component'; import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component'; import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component'; import { AccordionProgrammaticExpansionComponent } from './accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component'; @@ -93,6 +98,31 @@ import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-re import { TileManagerComponent } from './tile-manager/tile-manager-sample/tile-manager.component'; export const LayoutsRoutes: Routes = [ + { + component: AccordionOverviewComponent, + data: layoutsRoutesData['accordion-overview'], + path: 'accordion-overview' + }, + { + component: AccordionCustomizationComponent, + data: layoutsRoutesData['accordion-customization'], + path: 'accordion-customization' + }, + { + component: AccordionNestedScenarioComponent, + data: layoutsRoutesData['accordion-nested-scenario'], + path: 'accordion-nested-scenario' + }, + { + component: AccordionStylingComponent, + data: layoutsRoutesData['accordion-styling'], + path: 'accordion-styling' + }, + { + component: AccordionTailwindStylingComponent, + data: layoutsRoutesData['accordion-tailwind-styling'], + path: 'accordion-tailwind-styling' + }, { component: AccordionSample1Component, data: layoutsRoutesData['accordion-sample-1'],