feat(accordion): update accordion samples for new documentation

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"],

src/app/layouts/accordion/accordion-customization/accordion-customization.component.html

@@ -0,0 +1,70 @@
+<div class="accordion-sample">
+    <div class="accordion-content">
+        <igx-accordion>
+            <igx-expansion-panel [collapsed]="false">
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Transportation@if (selectedCategories) {<span>: {{ selectedCategories }}</span>}</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Choose how you want to travel</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p class="panel-description">Select one or more transportation options for your trip.</p>
+                    <div class="categories-container">
+                        @for (category of categories; track category.type) {
+                            <igx-checkbox class="category-option" [(ngModel)]="category.checked">{{ category.type }}</igx-checkbox>
+                        }
+                    </div>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Budget: ${{ slider.lowerValue }} - ${{ slider.upperValue }}</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Set the price range</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p class="panel-description">Adjust the minimum and maximum cost for available options.</p>
+                    <div class="range-summary">
+                        <span>${{ slider.lowerValue }}</span>
+                        <span>${{ slider.upperValue }}</span>
+                    </div>
+                    <igx-slider #slider class="cost-slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange"></igx-slider>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Minimum Rating@if (rating) {<span>: {{ rating }}</span>}</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Filter by review score</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p class="panel-description">Choose the lowest rating you want to include in the results.</p>
+                    <div class="rating-options">
+                        @for (ratingOption of ratingOptions; track ratingOption) {
+                            <igx-radio class="rating-option" [(ngModel)]="rating" [value]="ratingOption + ' stars or more'">
+                                <span>{{ ratingOption }} stars or more</span>
+                                <span class="rating-control">
+                                    @for (star of [].constructor(ratingOption); track $index) {
+                                        <igx-icon>star</igx-icon>
+                                    }
+                                </span>
+                            </igx-radio>
+                        }
+                    </div>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Arrival Time{{ time }}</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Set the latest arrival time</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p class="panel-description">Pick the latest acceptable arrival time for your trip.</p>
+                    <igx-time-picker class="time-input size-small" [(ngModel)]="arriveTime" mode="dropdown" [spinLoop]="false">
+                        <label igxLabel>Arrive before</label>
+                    </igx-time-picker>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+        </igx-accordion>
+    </div>
+</div>

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);
+}

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
+    ) {
+    }
+}

src/app/layouts/accordion/accordion-nested-scenario/accordion-nested-scenario.component.html

@@ -0,0 +1,69 @@
+<div class="accordion-sample">
+    <div class="accordion-content">
+        <div class="accordion-toolbar">
+            <igx-switch [(ngModel)]="singleBranchExpand">Single Expand</igx-switch>
+        </div>
+
+        <igx-accordion [singleBranchExpand]="singleBranchExpand">
+            <igx-expansion-panel [collapsed]="false">
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Workspace Settings</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Nested account, access, and billing options</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <igx-accordion [singleBranchExpand]="singleBranchExpand">
+                        <igx-expansion-panel [collapsed]="false">
+                            <igx-expansion-panel-header>
+                                <igx-expansion-panel-title>Profile</igx-expansion-panel-title>
+                                <igx-expansion-panel-description>Name, photo, and contact details</igx-expansion-panel-description>
+                            </igx-expansion-panel-header>
+                            <igx-expansion-panel-body>
+                                <p>Update the public information shown to other workspace members.</p>
+                            </igx-expansion-panel-body>
+                        </igx-expansion-panel>
+
+                        <igx-expansion-panel>
+                            <igx-expansion-panel-header>
+                                <igx-expansion-panel-title>Security</igx-expansion-panel-title>
+                                <igx-expansion-panel-description>Password and sign-in preferences</igx-expansion-panel-description>
+                            </igx-expansion-panel-header>
+                            <igx-expansion-panel-body>
+                                <p>Review active sessions, change your password, and configure sign-in requirements.</p>
+                            </igx-expansion-panel-body>
+                        </igx-expansion-panel>
+
+                        <igx-expansion-panel>
+                            <igx-expansion-panel-header>
+                                <igx-expansion-panel-title>Notifications</igx-expansion-panel-title>
+                                <igx-expansion-panel-description>Email and product updates</igx-expansion-panel-description>
+                            </igx-expansion-panel-header>
+                            <igx-expansion-panel-body>
+                                <p>Choose the messages you receive for comments, assignments, and releases.</p>
+                            </igx-expansion-panel-body>
+                        </igx-expansion-panel>
+                    </igx-accordion>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Team Access</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Members, roles, and permissions</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p>Invite teammates, assign roles, and review workspace permissions.</p>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Billing</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Plan, invoices, and payment method</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p>Manage subscription details, billing contacts, and invoice delivery.</p>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+        </igx-accordion>
+    </div>
+</div>

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;
+}

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;
+}

src/app/layouts/accordion/accordion-overview/accordion-overview.component.html

@@ -0,0 +1,37 @@
+<div class="accordion-sample">
+    <div class="accordion-content">
+        <div class="accordion-toolbar">
+            <igx-switch [(ngModel)]="singleBranchExpand">Single Expand</igx-switch>
+        </div>
+
+        <igx-accordion [singleBranchExpand]="singleBranchExpand">
+            <igx-expansion-panel [collapsed]="false">
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Account</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Profile and security settings</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p>Update your profile details, password, and sign-in preferences.</p>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Notifications</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Email and product updates</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p>Choose which notifications you receive and how often they are delivered.</p>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+            <igx-expansion-panel>
+                <igx-expansion-panel-header>
+                    <igx-expansion-panel-title>Billing</igx-expansion-panel-title>
+                    <igx-expansion-panel-description>Payment and invoice settings</igx-expansion-panel-description>
+                </igx-expansion-panel-header>
+                <igx-expansion-panel-body>
+                    <p>Manage payment methods, billing contacts, and invoice delivery options.</p>
+                </igx-expansion-panel-body>
+            </igx-expansion-panel>
+        </igx-accordion>
+    </div>
+</div>

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;
+}

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;
+}