diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html similarity index 68% rename from src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.html rename to src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html index 0abc4628c262..84045c0dd5cc 100644 --- a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.html +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html @@ -23,7 +23,7 @@ [wrap]="wrap.value" [(value)]="expandedIds" > -
+

-
+

-
+

+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.ts similarity index 76% rename from src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.ts rename to src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.ts index 5f810bd34ef2..c2b1af0bdc4c 100644 --- a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.ts +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.ts @@ -12,12 +12,13 @@ import { CdkAccordionContent, } from '@angular/cdk-experimental/accordion'; -/** @title Accordion using UI Patterns. */ +/** @title Configurable Accordion using UI Patterns. */ @Component({ - selector: 'cdk-accordion-example', - exportAs: 'cdkAccordionExample', - templateUrl: 'cdk-accordion-example.html', - styleUrl: 'cdk-accordion-example.css', + selector: 'cdk-accordion-configurable-example', + exportAs: 'cdkAccordionConfigurableExample', + templateUrl: 'cdk-accordion-configurable-example.html', + styleUrl: '../cdk-accordion-examples.css', // Point to shared CSS + standalone: true, imports: [ ReactiveFormsModule, MatIconModule, @@ -31,7 +32,7 @@ import { CdkAccordionContent, ], }) -export class CdkAccordionExample { +export class CdkAccordionConfigurableExample { // Accordion Group Properties wrap = new FormControl(true, {nonNullable: true}); multi = new FormControl(true, {nonNullable: true}); @@ -40,7 +41,7 @@ export class CdkAccordionExample { expandedIds = model(['item1']); // Example items - items = ['item1', 'item2', 'item3']; + items = ['item1', 'item2', 'item3', 'item4', 'item5']; expansionIcon(item: string): Signal { return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.html new file mode 100644 index 000000000000..04387df81d66 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.html @@ -0,0 +1,77 @@ +
+
+

+ +

+
+ +

This is the content for Item 1.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 2. This should not be expandable if trigger is disabled.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 3.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.ts new file mode 100644 index 000000000000..fc6d5d694058 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example.ts @@ -0,0 +1,30 @@ +import {Component, computed, model, Signal} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import { + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, +} from '@angular/cdk-experimental/accordion'; + +/** @title Accordion with focusable disabled items. */ +@Component({ + selector: 'cdk-accordion-disabled-focusable-example', + templateUrl: 'cdk-accordion-disabled-focusable-example.html', + styleUrl: '../cdk-accordion-examples.css', + standalone: true, + imports: [ + MatIconModule, + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, + ], +}) +export class CdkAccordionDisabledFocusableExample { + expandedIds = model([]); + + expansionIcon(item: string): Signal { + return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); + } +} diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.html new file mode 100644 index 000000000000..617780d401ca --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.html @@ -0,0 +1,77 @@ +
+
+

+ +

+
+ +

This is the content for Item 1.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 2. This should not be reachable or expandable.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 3.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.ts new file mode 100644 index 000000000000..c37b1a744a79 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example.ts @@ -0,0 +1,30 @@ +import {Component, computed, model, Signal} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import { + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, +} from '@angular/cdk-experimental/accordion'; + +/** @title Accordion with skipped disabled items. */ +@Component({ + selector: 'cdk-accordion-disabled-skipped-example', + templateUrl: 'cdk-accordion-disabled-skipped-example.html', + styleUrl: '../cdk-accordion-examples.css', + standalone: true, + imports: [ + MatIconModule, + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, + ], +}) +export class CdkAccordionDisabledSkippedExample { + expandedIds = model([]); + + expansionIcon(item: string): Signal { + return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); + } +} diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.html new file mode 100644 index 000000000000..3ef9e3d3a16f --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.html @@ -0,0 +1,73 @@ +
+
+

+ +

+
+ +

This is the content for Item 1.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 2.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 3.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.ts new file mode 100644 index 000000000000..3476b9e84590 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-disabled/cdk-accordion-disabled-example.ts @@ -0,0 +1,30 @@ +import {Component, computed, model, Signal} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import { + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, +} from '@angular/cdk-experimental/accordion'; + +/** @title Disabled Accordion. */ +@Component({ + selector: 'cdk-accordion-disabled-example', + templateUrl: 'cdk-accordion-disabled-example.html', + styleUrl: '../cdk-accordion-examples.css', + standalone: true, + imports: [ + MatIconModule, + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, + ], +}) +export class CdkAccordionDisabledExample { + expandedIds = model(['item1']); + + expansionIcon(item: string): Signal { + return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); + } +} diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.css b/src/components-examples/cdk-experimental/accordion/cdk-accordion-examples.css similarity index 96% rename from src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.css rename to src/components-examples/cdk-experimental/accordion/cdk-accordion-examples.css index d0ae603e449d..9cf934ec507a 100644 --- a/src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.css +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-examples.css @@ -1,3 +1,4 @@ +/* Common styles for CDK Accordion examples */ .example-accordion-controls { display: flex; flex-wrap: wrap; diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.html new file mode 100644 index 000000000000..5a95345b9df2 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.html @@ -0,0 +1,90 @@ +
+
+

+ +

+
+ +

This is the content for Item 1. Multiple items can be expanded.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 2.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 3.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.ts new file mode 100644 index 000000000000..5c98cc70f684 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.ts @@ -0,0 +1,30 @@ +import {Component, computed, model, Signal} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import { + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, +} from '@angular/cdk-experimental/accordion'; + +/** @title Accordion with multi-expansion. */ +@Component({ + selector: 'cdk-accordion-multi-expansion-example', + templateUrl: 'cdk-accordion-multi-expansion-example.html', + styleUrl: '../cdk-accordion-examples.css', + standalone: true, + imports: [ + MatIconModule, + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, + ], +}) +export class CdkAccordionMultiExpansionExample { + expandedIds = model([]); + + expansionIcon(item: string): Signal { + return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); + } +} diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.html b/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.html new file mode 100644 index 000000000000..5579965c75d0 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.html @@ -0,0 +1,90 @@ +
+
+

+ +

+
+ +

This is the content for Item 1.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 2.

+ + +
+
+ +
+

+ +

+
+ +

This is the content for Item 3.

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 4

+ +
+
+ +
+

+ +

+
+ +

This is the content for Item 5

+ +
+
+
diff --git a/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.ts b/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.ts new file mode 100644 index 000000000000..4baea4e59896 --- /dev/null +++ b/src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.ts @@ -0,0 +1,30 @@ +import {Component, computed, model, Signal} from '@angular/core'; +import {MatIconModule} from '@angular/material/icon'; +import { + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, +} from '@angular/cdk-experimental/accordion'; + +/** @title Accordion with single expansion. */ +@Component({ + selector: 'cdk-accordion-single-expansion-example', + templateUrl: 'cdk-accordion-single-expansion-example.html', + styleUrl: '../cdk-accordion-examples.css', + standalone: true, + imports: [ + MatIconModule, + CdkAccordionGroup, + CdkAccordionTrigger, + CdkAccordionPanel, + CdkAccordionContent, + ], +}) +export class CdkAccordionSingleExpansionExample { + expandedIds = model([]); + + expansionIcon(item: string): Signal { + return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more')); + } +} diff --git a/src/components-examples/cdk-experimental/accordion/index.ts b/src/components-examples/cdk-experimental/accordion/index.ts index d35cda000da3..2c900596445b 100644 --- a/src/components-examples/cdk-experimental/accordion/index.ts +++ b/src/components-examples/cdk-experimental/accordion/index.ts @@ -1 +1,6 @@ -export {CdkAccordionExample} from './cdk-accordion/cdk-accordion-example'; +export {CdkAccordionConfigurableExample} from './cdk-accordion-configurable/cdk-accordion-configurable-example'; +export {CdkAccordionSingleExpansionExample} from './cdk-accordion-single-expansion/cdk-accordion-single-expansion-example'; +export {CdkAccordionMultiExpansionExample} from './cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example'; +export {CdkAccordionDisabledFocusableExample} from './cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example'; +export {CdkAccordionDisabledSkippedExample} from './cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example'; +export {CdkAccordionDisabledExample} from './cdk-accordion-disabled/cdk-accordion-disabled-example'; diff --git a/src/dev-app/cdk-experimental-accordion/BUILD.bazel b/src/dev-app/cdk-experimental-accordion/BUILD.bazel index 2c66553572b3..91c35abf9d6b 100644 --- a/src/dev-app/cdk-experimental-accordion/BUILD.bazel +++ b/src/dev-app/cdk-experimental-accordion/BUILD.bazel @@ -5,6 +5,9 @@ package(default_visibility = ["//visibility:public"]) ng_project( name = "cdk-experimental-accordion", srcs = glob(["**/*.ts"]), - assets = ["cdk-accordion-demo.html"], + assets = [ + "cdk-accordion-demo.html", + "cdk-accordion-demo.css", + ], deps = ["//src/components-examples/cdk-experimental/accordion"], ) diff --git a/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.css b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.css new file mode 100644 index 000000000000..248988f1da76 --- /dev/null +++ b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.css @@ -0,0 +1,27 @@ +.example-accordion-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: 20px; +} + +.example-accordion-container { + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.example-accordion-container, +.example-configurable-accordion-container { + border: 1px solid #555; + border-radius: 5px; + padding: 20px; +} + +.example-configurable-accordion-container { + margin-top: 40px; +} + +h4 { + height: 36px; + margin-top: 0; +} diff --git a/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.html b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.html index 2f7e734d696d..379496af1eb3 100644 --- a/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.html +++ b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.html @@ -1,4 +1,38 @@
-

Accordion using UI Patterns

- +
+
+

Single expansion - Able to expand and collapse accordion panels.

+ +
+ +
+

Multi expansion - Able to expand and collapse multiple accordion panels

+ +
+ +
+

+ Disabled Accordions are Focusable - Able to navigate to a disabled accordion. Disabled + accordions are not expandable. +

+ +
+ +
+

+ Disabled Accordions are Skipped - Disabled accordions are skipped over and not expandable. +

+ +
+ +
+

Disabled - Focus should land on the accordion group instead of an accordion trigger.

+ +
+
+ +
+

Configurable Accordion

+ +
diff --git a/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.ts b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.ts index c4f22c58d973..127cfd8f0e0c 100644 --- a/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.ts +++ b/src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.ts @@ -6,12 +6,28 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {CdkAccordionExample} from '@angular/components-examples/cdk-experimental/accordion'; +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import { + CdkAccordionConfigurableExample, + CdkAccordionDisabledExample, + CdkAccordionDisabledFocusableExample, + CdkAccordionDisabledSkippedExample, + CdkAccordionMultiExpansionExample, + CdkAccordionSingleExpansionExample, +} from '@angular/components-examples/cdk-experimental/accordion'; @Component({ templateUrl: 'cdk-accordion-demo.html', - imports: [CdkAccordionExample], + styleUrl: 'cdk-accordion-demo.css', + imports: [ + CdkAccordionConfigurableExample, + CdkAccordionSingleExpansionExample, + CdkAccordionMultiExpansionExample, + CdkAccordionDisabledFocusableExample, + CdkAccordionDisabledSkippedExample, + CdkAccordionDisabledExample, + ], + encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) export class CdkExperimentalAccordionDemo {}